diff --git a/app/globals.css b/app/globals.css
index 6180a72f6..e3ad605ff 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -97,7 +97,9 @@
}
:root {
- --max-width: 113.5rem;
+ --current-max-width: 113.5rem;
+
+ --max-width: 94.5rem;
--max-width-content: 74.75rem;
--max-width-text-block: 49.5rem;
--mobile-site-header-height: 70.047px;
diff --git a/components/ContentType/HotelPage/IntroSection/introSection.module.css b/components/ContentType/HotelPage/IntroSection/introSection.module.css
index 4332cadbc..1697b7ee8 100644
--- a/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -2,6 +2,7 @@
display: grid;
gap: var(--Spacing-x2);
position: relative;
+ max-width: var(--max-width-text-block);
}
.mainContent {
diff --git a/components/ContentType/HotelPage/PreviewImages/index.tsx b/components/ContentType/HotelPage/PreviewImages/index.tsx
index 3b17f0dc4..3ee992bce 100644
--- a/components/ContentType/HotelPage/PreviewImages/index.tsx
+++ b/components/ContentType/HotelPage/PreviewImages/index.tsx
@@ -20,7 +20,6 @@ export default async function PreviewImages({ images }: PreviewImagesProps) {
title={image.title}
width={index === 0 ? 752 : 292}
height={index === 0 ? 540 : 266}
- objectFit="cover"
className={styles.image}
/>
))}
diff --git a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
index 70323fe20..7a1818557 100644
--- a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
+++ b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
@@ -1,26 +1,17 @@
.imageWrapper {
display: grid;
- grid-template-areas:
- "main"
- "main"
- "main";
gap: 8px;
position: relative;
width: 100%;
- padding-top: var(--Spacing-x2);
- background-color: var(--Base-Surface-Subtle-Normal);
+ padding: var(--Spacing-x2) var(--Spacing-x2) 0;
}
.image {
object-fit: cover;
border-radius: var(--Corner-radius-Medium);
- display: block;
width: 100%;
height: 100%;
-}
-
-.imageWrapper > :first-child {
- grid-area: main;
+ max-height: 30vh;
}
.imageWrapper > :nth-child(2),
@@ -33,20 +24,29 @@
bottom: var(--Spacing-x2);
right: var(--Spacing-x4);
z-index: 1;
- display: block;
}
@media screen and (min-width: 1367px) {
.imageWrapper {
- grid-template-columns: 72fr 28fr;
+ grid-template-columns: 70% 30%;
+ grid-template-rows: repeat(2, 16.625rem);
grid-template-areas:
"main side1"
"main side2";
+ padding: var(--Spacing-x2) var(--Spacing-x5) 0;
+ }
+
+ .image {
+ max-height: none;
+ }
+
+ .imageWrapper > :first-child {
+ grid-area: main;
}
.imageWrapper > :nth-child(2),
.imageWrapper > :nth-child(3) {
- display: block;
+ display: initial;
}
.imageWrapper > :nth-child(2) {
@@ -56,4 +56,8 @@
.desktopGrid > :nth-child(3) {
grid-area: side2;
}
+
+ .seeAllButton {
+ right: var(--Spacing-x7);
+ }
}
diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
index c9d299b6b..e0678cd5e 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -2,9 +2,9 @@
import { useIntl } from "react-intl"
-import { ImageIcon } from "@/components/Icons"
+import { ChevronRightIcon, ImageIcon } from "@/components/Icons"
import Image from "@/components/Image"
-import Link from "@/components/TempDesignSystem/Link"
+import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
@@ -62,14 +62,10 @@ export function RoomCard({
{subtitle}
-
+
)
diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index 08e8f07ce..b6fa4f7dc 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -80,7 +80,7 @@ export function Rooms({ rooms }: RoomsProps) {