🎨 style(secondary): ajustar responsividade e tamanhos de texto

app/components/SectionSecondary.vue

@@ -1,28 +1,32 @@
 <template>
-  <section class="w-full bg-[#080E00] relative flex flex-col items-center justify-end overflow-hidden" :style="{ minHeight: '1556px' }">
-    <NuxtImg src="/img/hexagon.svg" width="1546" class="absolute inset-0 m-auto z-0 pointer-events-none" aria-hidden="true" />
-    <NuxtImg src="/img/hexagons_right.svg" class="absolute top-0 left-0 z-10 pointer-events-none" aria-hidden="true" />
-    <NuxtImg src="/img/hexagons_left.svg" class="absolute bottom-0 right-0 z-10 pointer-events-none" aria-hidden="true" />
+  <section class="w-full bg-[#080E00] pt-20 md:pt-32 lg:pt-46 relative flex flex-col items-center justify-end overflow-hidden px-4">
+    <NuxtImg src="/img/hexagon.svg" width="1546" class="absolute inset-0 m-auto z-0 pointer-events-none hidden sm:block" aria-hidden="true" />
+    <NuxtImg src="/img/hexagons_right.svg" class="absolute top-0 left-0 lg:z-50 pointer-events-none w-1/2 sm:w-auto" aria-hidden="true" />
+    <NuxtImg src="/img/hexagons_left.svg" class="absolute bottom-0 right-0 lg:z-50 pointer-events-none w-1/2 sm:w-auto" aria-hidden="true" />
 
-    <div class="bg-[#F6FFE9] rounded-t-[30px] flex flex-col gap-5 justify-center items-center text-center relative z-20 px-4 mx-auto">
-      <NuxtImg src="/img/arrow_group.svg" width="220" />
-      <NuxtImg src="/img/logo.png" width="330" />
-      <h1 class="max-w-[788px] text-6xl uppercase bg-linear-to-r to-[#474747] from-[#111111] bg-clip-text text-transparent font-semibold">
+    <div class="w-full sm:w-5/6 lg:w-[70%] xl:w-full xl:max-w-[1189px] bg-[#F6FFE9] rounded-t-[30px] flex flex-col gap-5 justify-center items-center text-center relative z-20 px-4 md:px-10 pb-6 md:pb-12 lg:pb-18 mx-auto">
+      <NuxtImg src="/img/arrow_group.svg" width="220" class="w-32 md:w-44 lg:w-[220px]" />
+      <NuxtImg src="/img/logo.png" width="330" class="w-48 md:w-64 lg:w-[330px]" />
+      <h1 class="w-full lg:max-w-[788px] text-3xl md:text-5xl xl:text-6xl uppercase bg-linear-to-r to-[#474747] from-[#111111] bg-clip-text text-transparent font-semibold">
         Onde a ESTRATÉGIA encontra a Execução!
       </h1>
-      <p class="text-2xl text-[#202020] max-w-[532px]">
+      <p class="text-base md:text-xl lg:text-2xl text-[#202020] lg:max-w-[532px]">
         Muitos empresários conhecem a teoria, <span class="font-bold">mas poucos dominam o "como".</span>
       </p>
-      <p class="text-2xl text-[#202020] max-w-[640px]">
+      <p class="text-base md:text-xl lg:text-2xl text-[#202020] lg:max-w-[640px]">
         Utilizamos a metodologia consolidada do Expansão Sem Fronteiras <span class="font-bold">para entregar o que você
           realmente precisa:</span>
       </p>
-      <div class="flex items-center gap-3">
-        <div v-for="delivery in deliverys" :key="delivery" class="border border-[#E6E6E6] rounded-full px-6 py-2">
-          <span class="text-xl text-[#A7A7A7] font-medium">{{ delivery }}</span>
+      <div class="flex flex-wrap justify-center items-center gap-3">
+        <div
+          v-for="delivery in deliverys"
+          :key="delivery"
+          class="border border-[#E6E6E6] rounded-full px-4 md:px-6 py-2"
+        >
+          <span class="text-base md:text-lg lg:text-xl text-[#A7A7A7] font-medium">{{ delivery }}</span>
         </div>
       </div>
-      <NuxtImg src="/img/group.png" width="800" />
+      <NuxtImg src="/img/group.png" width="890" class="w-full max-w-[890px]" />
     </div>
   </section>
 </template>