Responsive refactor

assets/styles/layout/_responsive.scss

@@ -15,8 +15,7 @@
 }
 
 @media screen and (max-width: 991px) {
-    .layout-wrapper {    
-        .layout-topbar {   
+    .layout-topbar-inner {   
         padding-left: 2rem;
         padding-right: 2rem;
 
@@ -112,7 +111,6 @@
             height: 100%;
         }
     }
-    }
 
     .layout-content {
         padding-left: 2rem;
@@ -126,8 +124,7 @@
 }
 
 @media screen and (max-width: 575px) {
-    .layout-wrapper {
-        .layout-topbar {
+    .layout-topbar-inner {
         padding-left: 1rem;
         padding-right: 1rem;
 
@@ -160,7 +157,6 @@
             }
         }
     }
-    }
 
     .layout-news {
         padding-left: 1rem;

assets/styles/layout/_topbar.scss

@@ -10,18 +10,19 @@
     &.layout-topbar-sticky {
         backdrop-filter: blur(8px);
     }
+}
 
-    .layout-topbar-inner {
+.layout-topbar-inner {
     height: 4rem;
     padding: 0 4rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    }
 
     .layout-topbar-logo-container {
         width: 250px;
         margin-right: 4rem;
+    }
 
     .layout-topbar-logo {
         svg {
@@ -36,7 +37,6 @@
             width: 25px;
         }
     }
-    }
 
     #docsearch {
         margin-right: auto;

pages/landing/HeroSection.vue

@@ -1,7 +1,7 @@
 <template>
     <section class="landing-hero py-8 px-5 lg:px-8">
         <div class="flex flex-wrap">
-            <div class="w-full xl:w-6 flex flex-column justify-content-center px-8 align-items-center xl:align-items-stretch">
+            <div class="w-full xl:w-6 flex flex-column justify-content-center lg:px-8 align-items-center xl:align-items-stretch">
                 <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
                 <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                 <div>
@@ -193,4 +193,3 @@ export default {
     }
 };
 </script>
-