refactor(SW-99): better responsive styling of preview images

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -11,27 +11,7 @@ export default async function PreviewImages({ images }: PreviewImagesProps) {
   const intl = await getIntl()
   return (
     <Lightbox images={images}>
-      <div className={styles.mobileWrapper}>
+      <div className={styles.imageWrapper}>
-        <Image
-          src={images[0].url}
-          alt={images[0].alt}
-          title={images[0].title}
-          width={752}
-          height={540}
-          objectFit="cover"
-          className={styles.mobileImage}
-        />
-        <Button
-          theme="base"
-          intent="inverted"
-          size="small"
-          id="lightboxTrigger"
-          className={styles.seeAllButton}
-        >
-          {intl.formatMessage({ id: "See all photos" })}
-        </Button>
-      </div>
-      <div className={styles.desktopGrid}>
         {images.slice(0, 3).map((image, index) => (
           <Image
             key={index}
@@ -41,7 +21,7 @@ export default async function PreviewImages({ images }: PreviewImagesProps) {
             width={index === 0 ? 752 : 292}
             height={index === 0 ? 540 : 266}
             objectFit="cover"
-            className={styles.baseImage}
+            className={styles.image}
           />
         ))}
         <Button

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

@@ -1,17 +1,30 @@
-.mobileWrapper {
+.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);
 }
 
-.mobileImage {
+.image {
+  object-fit: cover;
+  border-radius: var(--Corner-radius-Medium);
   display: block;
   width: 100%;
-  height: auto;
+  height: 100%;
-  border-radius: var(--Corner-radius-Medium);
 }
 
-.desktopGrid {
+.imageWrapper > :first-child {
+  grid-area: main;
+}
+
+.imageWrapper > :nth-child(2),
+.imageWrapper > :nth-child(3) {
   display: none;
 }
 
@@ -24,49 +37,23 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .mobileImage {
+  .imageWrapper {
-    display: none;
+    grid-template-columns: 72fr 28fr;
+    grid-template-areas:
+      "main side1"
+      "main side2";
   }
 
-  .desktopGrid {
+  .imageWrapper > :nth-child(2),
-    display: grid;
+  .imageWrapper > :nth-child(3) {
-    grid-template-columns: 72% 28%;
+    display: block;
-    grid-template-rows: repeat(2, 1fr);
-    gap: 8px;
-    position: relative;
-    width: 100%;
-    padding-top: var(--Spacing-x2);
-    background-color: var(--Base-Surface-Subtle-Normal);
   }
 
-  .desktopGrid > :first-child {
+  .imageWrapper > :nth-child(2) {
-    grid-row: 1 / span 2;
+    grid-area: side1;
-    height: 100%;
-  }
-
-  .desktopGrid > :nth-child(2) {
-    grid-row: 1;
-    grid-column: 2;
   }
 
   .desktopGrid > :nth-child(3) {
-    grid-row: 2;
+    grid-area: side2;
-    grid-column: 2;
-  }
-
-  .seeAllButton {
-    position: absolute;
-    bottom: var(--Spacing-x2);
-    right: var(--Spacing-x4);
-    z-index: 1;
-    display: block;
-  }
-
-  .baseImage {
-    object-fit: cover;
-    border-radius: var(--Corner-radius-Medium);
-    display: block;
-    width: 100%;
-    height: 100%;
   }
 }