fix: refactor breadcrumbs to take page type variants to better match margins

components/HotelReservation/SelectHotel/selectHotel.module.css

@@ -1,21 +1,25 @@
 .main {
   display: flex;
-  padding: 0 var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
   flex-direction: column;
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
   margin: 0 auto;
 }
 
 .header {
+  padding: var(--Spacing-x3) 0 var(--Spacing-x2);
+}
+
+.headerContent {
+  max-width: var(--max-width-page);
+  margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
 }
 
-.header nav {
+.headerContent nav {
   display: none;
 }
 
@@ -70,16 +74,18 @@
 
 @media (min-width: 768px) {
   .main {
-    padding: var(--Spacing-x5);
-  }
-  .header {
-    display: block;
-    background-color: var(--Base-Surface-Subtle-Normal);
-    padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
-      var(--Spacing-x5);
+    padding: var(--Spacing-x5) 0;
   }
 
-  .header nav {
+  .headerContent {
+    display: block;
+  }
+  .header {
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Spacing-x4) 0 var(--Spacing-x3);
+  }
+
+  .headerContent nav {
     display: block;
     max-width: var(--max-width-navigation);
     padding: 0;