From 34230624ce6f29bebd3d4fbfa4fc36e5db932359 Mon Sep 17 00:00:00 2001
From: David Ascanio <daviddeveloper24@outlook.com>
Date: Sun, 2 Aug 2026 13:45:42 -0300
Subject: [PATCH] Fix responsive text wrapping in values section titles

Replace break-all (which sliced words at arbitrary characters) with
word-aware wrapping, add missing min-w-0 that let one grid column
overflow, and tune the title font-size breakpoints so headings never
fracture mid-word in the tight column widths between lg and 2xl.
---
 src/components/section/ColumnsSection.astro | 28 ++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/section/ColumnsSection.astro b/src/components/section/ColumnsSection.astro
index 453aeeb..08cea0e 100644
--- a/src/components/section/ColumnsSection.astro
+++ b/src/components/section/ColumnsSection.astro
@@ -9,17 +9,17 @@ const { props } = Astro.props;
 <div class="container mx-auto">
     <div class="grid md:grid-cols-2 min-w-0">
         <div class="bg-[#EBE5D0] p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0">
-            <div class="flex flex-col justify-between min-h-full break-all">
-                <h2 class="text-5xl font-secondary text-tertiary font-bold">{tl("values.justice.title")}</h2>
+            <div class="flex flex-col justify-between min-h-full min-w-0">
+                <h2 class="text-3xl lg:text-2xl xl:text-3xl 2xl:text-5xl font-secondary text-tertiary font-bold wrap-break-word">{tl("values.justice.title")}</h2>
                 <p class="text-lg text-tertiary break-words">{tl("values.justice.text")}</p>
             </div>
-            <div class="flex items-end justify-end min-h-full">
-                <Icon name="icon_justice_1" class="text-6xl md:text-9xl text-tertiary" />
+            <div class="flex items-end justify-end min-h-full min-w-0 max-w-full">
+                <Icon name="icon_justice_1" class="text-6xl md:text-9xl text-tertiary max-w-full h-auto" />
             </div>
         </div>
         <div class="bg-tertiary p-6 md:p-12 lg:p-24 grid lg:grid-cols-2 min-w-0">
             <div class="flex flex-col justify-between min-h-full min-w-0 max-w-full">
-                <h2 class="text-5xl font-secondary font-bold text-[#CBA16A] break-all">{tl("values.integrity.title")}</h2>
+                <h2 class="text-3xl lg:text-2xl xl:text-3xl 2xl:text-5xl font-secondary font-bold text-[#CBA16A] wrap-break-word">{tl("values.integrity.title")}</h2>
                 <p class="text-[#CBA16A] text-lg break-words">{tl("values.integrity.text")}</p>
             </div>
             <div class="flex items-end justify-end min-h-full min-w-0 max-w-full">
@@ -28,17 +28,17 @@ const { props } = Astro.props;
         </div>
     </div>
     <div class="grid lg:grid-cols-3">
-        <div class="bg-tertiary p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
-            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">{tl("values.service.title")}</h2>
-            <p class="text-xl text-[#EBE5D0]">{tl("values.service.text")}</p>
+        <div class="bg-tertiary p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square min-w-0">
+            <h2 class="text-3xl 2xl:text-5xl font-secondary font-bold text-white wrap-break-word">{tl("values.service.title")}</h2>
+            <p class="text-xl text-[#EBE5D0] wrap-break-word">{tl("values.service.text")}</p>
         </div>
-        <div class="bg-[#BEA48D] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
-            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-tertiary">{tl("values.excellence.title")}</h2>
-            <p class="text-xl text-tertiary">{tl("values.excellence.text")}</p>
+        <div class="bg-[#BEA48D] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square min-w-0">
+            <h2 class="text-3xl 2xl:text-5xl font-secondary font-bold text-tertiary wrap-break-word">{tl("values.excellence.title")}</h2>
+            <p class="text-xl text-tertiary wrap-break-word">{tl("values.excellence.text")}</p>
         </div>
-        <div class="bg-[#22523F] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square">
-            <h2 class="text-3xl xl:text-5xl font-secondary font-bold text-white">{tl("values.dialogue.title")}</h2>
-            <p class="text-white text-xl">{tl("values.dialogue.text")}</p>
+        <div class="bg-[#22523F] p-12 xl:p-20 2xl:p-24 flex justify-between flex-col min-h-full lg:aspect-square min-w-0">
+            <h2 class="text-3xl 2xl:text-5xl font-secondary font-bold text-white wrap-break-word">{tl("values.dialogue.title")}</h2>
+            <p class="text-white text-xl wrap-break-word">{tl("values.dialogue.text")}</p>
         </div>
     </div>
 </div>