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

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -104,10 +104,11 @@
 
 @media screen and (min-width: 768px) and (max-width: 1366px) {
   .inputContainer {
-    padding: var(--Spacing-x2) var(--Spacing-x2);
+    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
+      var(--Layout-Tablet-Margin-Margin-min);
   }
   .buttonContainer {
-    padding-right: var(--Spacing-x2);
+    padding-right: var(--Layout-Tablet-Margin-Margin-min);
   }
   .input .buttonContainer .button {
     padding: var(--Spacing-x1);
@@ -125,7 +126,7 @@
     display: flex;
     background: var(--Base-Surface-Primary-light-Hover);
     border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-    padding: var(--Spacing-x2);
+    padding: var(--Spacing-x2) var(--Layout-Tablet-Margin-Margin-min);
   }
   .voucherContainer {
     display: none;

components/Forms/BookingWidget/form.module.css

@@ -2,15 +2,11 @@
   align-items: center;
   display: grid;
   margin: 0 auto;
-  width: min(
-    calc(100dvw - (var(--Spacing-x2) * 2)),
-    var(--max-width-navigation)
-  );
+  width: 100dvw;
 }
 
 .form {
   display: grid;
-  width: 100%;
 }
 
 @media screen and (max-width: 767px) {
@@ -20,11 +16,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .section {
-    display: flex;
-    width: 100%;
-  }
-
   .default {
     border-radius: var(--Corner-radius-Medium);
   }
@@ -36,14 +27,12 @@
       var(--Spacing-x-one-and-half) var(--Spacing-x1);
   }
 
-  .section {
-    width: min(
-      calc(100dvw - (var(--Spacing-x2) * 2)),
-      var(--max-width-navigation)
-    );
-  }
-
   .full {
     padding: var(--Spacing-x1) 0;
   }
+  .form {
+    width: 100%;
+    max-width: var(--max-width-page);
+    margin: 0 auto;
+  }
 }