From b464f414e13e80f4fba2d7295e53d788b81a9362 Mon Sep 17 00:00:00 2001
From: roble <renanroble@gmail.com>
Date: Sat, 18 Apr 2026 15:35:00 +0100
Subject: [PATCH] fix: adjust padding and layout in HeroSection for improved
 responsiveness

---
 resources/js/pages/sections/HeroSection.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/js/pages/sections/HeroSection.vue b/resources/js/pages/sections/HeroSection.vue
index b12e20a..3ae8af2 100644
--- a/resources/js/pages/sections/HeroSection.vue
+++ b/resources/js/pages/sections/HeroSection.vue
@@ -33,9 +33,9 @@ onUnmounted(() => {
 
 <template>
     <div class="bg-background relative isolate flex min-h-screen flex-col">
-        <main class="mx-auto w-full px-12 md:px-16 lg:px-8">
+        <main class="mx-auto w-full">
             <div
-                class="relative overflow-hidden mask-t-from-95% mask-b-from-95% md:mask-r-from-95% md:mask-l-from-95%"
+                class="px-6 md:px-16 lg:px-8 relative overflow-hidden mask-t-from-95% mask-b-from-95% md:mask-r-from-95% md:mask-l-from-95%"
             >
                 <div class="mt-6 pt-24 pb-12">
                     <h1
@@ -106,7 +106,7 @@ onUnmounted(() => {
                 </div>
                 <!-- Module cards — grid is transformed as one unit for correct alignment -->
                 <div
-                    class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 gap-y-2 px-20 pt-8 pb-16 font-mono has-[[data-card]:hover]:*:data-card:opacity-40 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
+                    class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 gap-y-2 px-6 pt-8 pb-16 sm:px-10 lg:px-20 font-mono has-[[data-card]:hover]:*:data-card:opacity-40 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
                 >
                     <ModuleCard
                         v-for="(mod, index) in modules"