🎨 style(roadmap): adicionar imagem mobile e ajustar responsividade

app/components/SectionRoadMap.vue

@@ -1,11 +1,12 @@
 <template>
-  <section class="bg-[url('/img/roadmap_bg.png')] bg-cover py-24 flex flex-col items-center gap-24">
-    <h1 class="max-w-[762px] text-[50px] uppercase font-semibold text-gradient text-center leading-tight">
+  <section class="bg-[url('/img/roadmap_bg.png')] bg-cover py-16 lg:py-24 flex flex-col items-center gap-16 lg:gap-24 px-4">
+    <h1 class="max-w-[762px] text-4xl md:text-[40px] lg:text-[50px] uppercase font-semibold text-gradient text-center leading-tight">
       É hora de viver os melhores anos da sua vida
     </h1>
 
     <div>
-      <NuxtImg src="/img/roadmap_img.png" width="950" />
+      <NuxtImg src="/img/roadmap_img.png" width="950" class="hidden md:block" />
+      <NuxtImg src="/img/roadmap_img_mobile.png" class="w-full block md:hidden" />
     </div>
   </section>
 </template>