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

components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css

@@ -11,10 +11,12 @@
 .bottomSheet {
   display: grid;
   grid-template-columns: 1fr auto;
-  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5)
-    var(--Spacing-x3);
+  padding: var(--Spacing-x2) 0 var(--Spacing-x5);
   align-items: flex-start;
   transition: 0.5s ease-in-out;
+  max-width: var(--max-width-page);
+  width: 100%;
+  margin: 0 auto;
 }
 
 .priceDetailsButton {
@@ -25,6 +27,7 @@
   transition: padding 0.5s ease-in-out;
   cursor: pointer;
   white-space: nowrap;
+  padding: 0;
 }
 
 .wrapper[data-open="true"] {
@@ -51,6 +54,12 @@
   overflow: hidden;
 }
 
+@media screen and (min-width: 768px) {
+  .bottomSheet {
+    padding: var(--Spacing-x2) 0 var(--Spacing-x7);
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;