feat(SW-96): add preview image and lightbox CTA on mobile viewports

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -15,8 +15,27 @@ export default async function PreviewImages({
   const intl = await getIntl()
   return (
     <Lightbox images={images}>
+      {/*TODO: Replace with images from API once SW-189 is merged. */}
+      <div className={styles.mobileWrapper}>
+        <Image
+          src={images[0].url}
+          alt={images[0].alt}
+          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}>
-        {/*TODO: Replace with images from API once SW-189 is merged. */}
         {images.slice(0, 3).map((image, index) => (
           <Image
             key={index}

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

@@ -1,8 +1,33 @@
+.mobileWrapper {
+  position: relative;
+  padding-top: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Subtle-Normal);
+}
+
+.mobileImage {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: var(--Corner-radius-Medium);
+}
+
 .desktopGrid {
   display: none;
 }
 
+.seeAllButton {
+  position: absolute;
+  bottom: var(--Spacing-x2);
+  right: var(--Spacing-x4);
+  z-index: 1;
+  display: block;
+}
+
 @media screen and (min-width: 1367px) {
+  .mobileImage {
+    display: none;
+  }
+
   .desktopGrid {
     display: grid;
     grid-template-columns: 72% 28%;