ソースを参照

🎨 style(tertiary): ajustar layout e ocultar imagem no mobile

joykepler 3 日 前
コミット
d3f9dbcc30
1 ファイル変更5 行追加5 行削除
  1. 5 5
      app/components/SectionTertiary.vue

+ 5 - 5
app/components/SectionTertiary.vue

@@ -1,10 +1,10 @@
 <template>
-  <section class="relative bg-[url('/img/section_tertiary_bg.svg')] bg-cover py-28 flex items-center justify-center overflow-hidden">
-    <div class="relative z-10 w-[525px] flex flex-col justify-center gap-10 ml-24">
-      <h2 class="max-w-[452px] text-[50px] uppercase font-semibold text-gradient leading-tight">
+  <section class="relative bg-[url('/img/section_tertiary_bg.svg')] bg-cover py-16 lg:py-28 flex items-center justify-center px-4">
+    <div class="relative z-10 lg:w-[525px] flex flex-col justify-center gap-10 lg:ml-24">
+      <h2 class="lg:max-w-[452px] text-4xl md:text-[46px] lg:text-[50px] uppercase font-semibold text-gradient leading-tight">
         IMERSÃO IGUASSU ALLIANCE
       </h2>
-      <div class="flex flex-col gap-5">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 gap-5 w-full">
         <SectionTertiaryCard
           v-for="(card, index) in cards" :key="index"
           :title="card.title" 
@@ -16,7 +16,7 @@
     <NuxtImg 
       src="/img/hexagons_photos.png" 
       width="1000" 
-      class="relative -ml-45 z-0" 
+      class="hidden lg:block relative lg:-ml-45 z-0" 
     />
   </section>
 </template>