diff --git a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx index 0ea3ed32d..82fa7a023 100644 --- a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/index.tsx @@ -23,7 +23,7 @@ export default async function MeetingsAndConferencesSidePeek({ const intl = await getIntl() const fallbackAlt = intl.formatMessage({ id: "Creative spaces for meetings" }) - const getImage = (index: number) => { + function getImage(index: number) { const list = meetingFacilities?.heroImages[index] return { image: list?.imageSizes.medium, @@ -60,7 +60,7 @@ export default async function MeetingsAndConferencesSidePeek({ alt={secondaryAltText} height={300} width={200} - className={styles.image} + className={`${styles.image} ${styles.secondaryImage}`} /> )} diff --git a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css index a8cf8b7aa..ab19b9748 100644 --- a/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css +++ b/components/ContentType/HotelPage/SidePeeks/MeetingsAndConferences/meetingsAndConferences.module.css @@ -6,19 +6,17 @@ ); /* Creates space between the wrapper and buttonContainer */ } -.imageContainer { - display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--Spacing-x2); -} - .image { width: 100%; - height: 240px; + height: 300px; object-fit: cover; border-radius: var(--Corner-radius-Medium); } +.secondaryImage { + display: none; +} + .buttonContainer { background-color: var(--Base-Background-Primary-Normal); border-top: 1px solid var(--Base-Border-Subtle); @@ -28,3 +26,19 @@ left: 0; bottom: 0; } + +@media screen and (min-width: 768px) { + .imageContainer { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--Spacing-x2); + } + + .image { + height: 240px; + } + + .secondaryImage { + display: block; + } +}