feat(SW-936): add breakpoints

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}`}
               />
             )}
           </div>

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;
+  }
+}