feat(SW-185): Footer mobile adjustments

components/Footer/Navigation/MainNav/mainnav.module.css

@@ -1,5 +1,4 @@
 .mainNavigation {
-  max-width: 360px;
   width: 100%;
 }
 
@@ -10,6 +9,9 @@
 .mainNavigationItem {
   padding: var(--Spacing-x3) 0;
   border-bottom: 1px solid var(--Scandic-Peach-20);
+  &:first-child {
+    padding-top: 0;
+  }
   &:last-child {
     border-bottom: 0;
   }
@@ -21,3 +23,9 @@
   display: flex;
   justify-content: space-between;
 }
+
+@media screen and (min-width: 1367px) {
+  .mainNavigation {
+    max-width: 360px;
+  }
+}

components/Footer/Navigation/SecondaryNav/secondarynav.module.css

@@ -1,6 +1,8 @@
 .secondaryNavigation {
   display: flex;
-  gap: 80px;
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x6);
+  margin-top: var(--Spacing-x6);
 }
 
 .secondaryNavigationList {
@@ -23,3 +25,11 @@
   font-family: var(--typography-Body-Bold-fontFamily);
   margin: 0;
 }
+
+@media screen and (min-width: 1367px) {
+  .secondaryNavigation {
+    margin-top: 0;
+    gap: 80px;
+    flex-direction: row;
+  }
+}

components/Footer/Navigation/navigation.module.css

@@ -1,6 +1,6 @@
 .section {
   background: var(--Scandic-Brand-Pale-Peach);
-  padding: 160px var(--Spacing-x9);
+  padding: var(--Spacing-x9) var(--Spacing-x2);
   color: var(--Scandic-Brand-Burgundy);
 }
 
@@ -8,4 +8,14 @@
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
+  flex-direction: column;
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    padding: 160px var(--Spacing-x9);
+  }
+  .maxWidth {
+    flex-direction: row;
+  }
 }