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

components/ContentType/HotelPage/PreviewImages/previewImages.module.css

@@ -3,7 +3,7 @@
   gap: 8px;
   position: relative;
   width: 100%;
-  padding: var(--Spacing-x2) var(--Spacing-x2) 0;
+  padding: 0 var(--Spacing-x2);
   z-index: 0;
 }
 
@@ -14,6 +14,8 @@
   height: 100%;
   max-height: 30vh;
   cursor: pointer;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 .imageWrapper > :nth-child(2),
@@ -28,6 +30,12 @@
   z-index: 1;
 }
 
+@media screen and (min-width: 768px) {
+  .seeAllButton {
+    right: calc(var(--Spacing-x2) + var(--Layout-Tablet-Margin-Margin-min));
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .imageWrapper {
     grid-template-columns: 70% 30%;
@@ -35,7 +43,7 @@
     grid-template-areas:
       "main side1"
       "main side2";
-    padding: var(--Spacing-x2) var(--Spacing-x5) 0;
+    padding: 0 var(--Spacing-x5);
   }
 
   .image {

components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css

@@ -12,9 +12,10 @@
   display: flex;
   gap: var(--Spacing-x4);
   justify-content: flex-start;
-  padding: 0 var(--Spacing-x2);
   width: 100%;
   overflow-x: auto;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 @media screen and (min-width: 768px) {
@@ -28,5 +29,6 @@
     padding: 0 var(--Spacing-x5);
     max-width: calc(100% - var(--hotel-page-map-desktop-width));
     overflow-x: visible;
+    margin: 0;
   }
 }

components/ContentType/HotelPage/hotelPage.module.css

@@ -13,7 +13,6 @@
     "tabNavigation"
     "mainSection"
     "mapContainer";
-  margin: 0 auto;
   max-width: var(--max-width);
 }
 
@@ -26,7 +25,9 @@
   grid-area: mainSection;
   display: grid;
   gap: var(--Spacing-x9);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
+  padding: var(--Spacing-x4) 0;
+  max-width: var(--max-width-page);
+  margin: 0 auto;
 }
 
 .mapContainer {
@@ -51,6 +52,17 @@
   gap: var(--Spacing-x2);
 }
 
+@media screen and (min-width: 768px) {
+  .pageContainer {
+    margin: 0 auto;
+  }
+
+  .mainSection {
+    max-width: 100%;
+    padding: var(--Spacing-x6) var(--Layout-Tablet-Margin-Margin-min);
+  }
+}
+
 @media screen and (min-width: 1367px) {
   .pageContainer {
     grid-template-areas:
@@ -61,7 +73,7 @@
   }
   .mainSection {
     grid-area: mainSection;
-    padding: var(--Spacing-x6) var(--Spacing-x4);
+    padding: var(--Spacing-x6) var(--Layout-Desktop-Margin-Margin-min);
   }
   .mapContainer {
     display: flex;

components/ContentType/HotelPage/index.tsx

@@ -42,6 +42,7 @@ import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
 import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
 import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
 import type { Facility } from "@/types/hotel"
+import { PageContentTypeEnum } from "@/types/requests/contentType"
 
 export default async function HotelPage({ hotelId }: HotelPageProps) {
   const lang = getLang()
@@ -122,7 +123,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
       />
       <header className={styles.header}>
         <Suspense fallback={<BreadcrumbsSkeleton />}>
-          <Breadcrumbs />
+          <Breadcrumbs variant={PageContentTypeEnum.hotelPage} />
         </Suspense>
         {images?.length ? (
           <PreviewImages images={images} hotelName={name} />