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

components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -1,17 +1,35 @@
 .breadcrumbs {
   display: block;
-  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
-  max-width: var(--max-width);
+  padding: var(--Spacing-x4) 0 var(--Spacing-x3);
   margin: 0 auto;
   width: 100%;
 }
 
+.contentWidth.breadcrumbs {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding-bottom: 0;
+}
+
+.hotelHeaderWidth.breadcrumbs {
+  max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
+}
+
+.fullWidth .list {
+  max-width: var(--max-width-navigation);
+}
+
+.contentWidth .list {
+  max-width: var(--max-width-content);
+}
+
 .list {
   align-items: center;
   display: flex;
   gap: var(--Spacing-x-quarter);
   justify-content: flex-start;
   list-style: none;
+  margin: 0 auto;
+  max-width: var(--max-width-page);
 }
 
 .listItem {
@@ -23,10 +41,3 @@
 .homeLink {
   display: flex;
 }
-
-@media screen and (min-width: 1367px) {
-  .breadcrumbs {
-    padding-left: var(--Spacing-x5);
-    padding-right: var(--Spacing-x5);
-  }
-}