fix: normalize page width

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css

@@ -1,6 +1,7 @@
 .container {
   display: grid;
   gap: var(--Spacing-x3) var(--Spacing-x9);
+  width: var(--max-width-page);
 }
 
 .content {
@@ -20,10 +21,6 @@
     grid-template-rows: auto 1fr;
     margin: var(--Spacing-x5) auto 0;
     /* simulates padding on viewport smaller than --max-width-navigation */
-    width: min(
-      calc(100dvw - (var(--Layout-Desktop-Margin-Margin-min) * 2)),
-      var(--max-width-navigation)
-    );
   }
 
   .content {

app/globals.css

@@ -104,6 +104,11 @@
   --max-width-text-block: 49.5rem;
   --current-mobile-site-header-height: 70.047px;
   --max-width-navigation: 89.5rem;
+  --max-width-spacing: calc(var(--Layout-Mobile-Margin-Margin-min) * 2);
+  --max-width-page: min(
+    calc(100dvw - var(--max-width-spacing)),
+    var(--max-width-navigation)
+  );
 
   --main-menu-mobile-height: 75px;
   --main-menu-desktop-height: 125px;
@@ -140,15 +145,25 @@ body {
 body.overflow-hidden {
   overflow: hidden;
 }
-@media screen and (min-width: 768px) {
-  body.overflow-hidden {
-    overflow: auto;
-    overflow-x: hidden;
-  }
-}
 
 ul {
   padding-inline-start: 0;
   margin-block-start: 0;
   margin-block-end: 0;
 }
+
+@media screen and (min-width: 768px) {
+  :root {
+    --max-width-spacing: calc(var(--Layout-Tablet-Margin-Margin-min) * 2);
+  }
+  body.overflow-hidden {
+    overflow: auto;
+    overflow-x: hidden;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  :root {
+    --max-width-spacing: calc(var(--Layout-Desktop-Margin-Margin-min) * 2);
+  }
+}

components/HotelReservation/EnterDetails/Header/header.module.css

@@ -24,9 +24,9 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  padding: var(--Spacing-x3) 0;
   margin: 0 auto;
 }
 
@@ -58,12 +58,12 @@
 
 @media (min-width: 768px) {
   .container {
-    padding: var(--Spacing-x3) var(--Spacing-x3);
+    padding: var(--Spacing-x3) 0;
   }
 }
 
 @media screen and (min-width: 1367px) {
   .container {
-    padding: var(--Spacing-x6) var(--Spacing-x5);
+    padding: var(--Spacing-x6) 0;
   }
 }