four col thing

dist/app.css

@@ -12343,7 +12343,7 @@ input, label, textarea {
   max-width: 400px;
   width: 20%;
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .main-nav .logo-wrapper {
     width: 100%;
     display: flex;
@@ -12368,7 +12368,7 @@ input, label, textarea {
     gap: 1rem !important;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .main-nav .logo-wrapper #mobile-nav-toggle {
     display: none;
   }
@@ -12396,7 +12396,7 @@ input, label, textarea {
   display: flex;
   flex-direction: column;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .main-nav nav.main-nav {
     display: flex;
     width: auto;
@@ -12406,7 +12406,7 @@ input, label, textarea {
   display: flex;
   align-items: center;
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .main-nav .menu-main-menu-container {
     width: 100%;
   }
@@ -12421,7 +12421,7 @@ input, label, textarea {
   list-style-type: none;
   gap: 1rem;
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .main-nav #menu-main-menu {
     flex-direction: column;
   }
@@ -12434,7 +12434,7 @@ input, label, textarea {
 .main-nav #menu-main-menu > li {
   position: relative;
 }
-@media (min-width: 992px) {
+@media (min-width: 1200px) {
   .main-nav #menu-main-menu > li:hover > ul {
     display: block;
     position: absolute;
@@ -12444,7 +12444,7 @@ input, label, textarea {
     padding: 0;
   }
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .main-nav #menu-main-menu > li.children-showing ul {
     display: flex;
     flex-direction: column;
@@ -12473,7 +12473,7 @@ input, label, textarea {
   border: 0;
   background-color: transparent;
 }
-@media (max-width: 767.98px) {
+@media (max-width: 991.98px) {
   .main-nav .toggle-sub-nav {
     width: 30px;
     height: 30px;

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/app.js": "/app.js?id=8af0c9c0d989b79afe124f8138dc1a63",
-    "/app.css": "/app.css?id=12f2c5721d8364525e28820d8f6dcd37"
+    "/app.css": "/app.css?id=e77da36fa217185e7b13dbdd5e313ebf"
 }

src/scss/header.scss

@@ -32,7 +32,7 @@
         max-width: 400px;
         width: 20%;
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint-down(lg) {
             width: 100%;
             display: flex;
             justify-content: space-between;
@@ -59,7 +59,7 @@
         }
 
         #mobile-nav-toggle {
-            @include media-breakpoint-up(md) {
+            @include media-breakpoint-up(lg) {
                 display: none;
             }
 
@@ -94,7 +94,7 @@
             flex-direction: column;
         }
 
-        @include media-breakpoint-up(md) {
+        @include media-breakpoint-up(lg) {
             display: flex;
             width: auto;
         }
@@ -104,7 +104,7 @@
         display: flex;
         align-items: center;
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint-down(lg) {
             width: 100%;
 
             & > ul {
@@ -120,7 +120,7 @@
         list-style-type: none;
         gap: 1rem;
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint-down(lg) {
             flex-direction: column;
         }
 
@@ -133,7 +133,7 @@
         & > li {
             position: relative;
 
-            @include media-breakpoint-up(lg) {
+            @include media-breakpoint-up(xl) {
                 &:hover {
                     & > ul {
                         display: block;
@@ -146,7 +146,7 @@
                 }
             }
 
-            @include media-breakpoint-down(md) {
+            @include media-breakpoint-down(lg) {
                 &.children-showing {
                     ul {
                         display: flex;
@@ -184,7 +184,7 @@
         border: 0;
         background-color: transparent;
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint-down(lg) {
             width: 30px;
             height: 30px;
             position: absolute;