feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox

* feat(SW-3152): Respecting image aspect ratio inside image gallery/lightbox
* feat(BOOK-144): Make image clickable instead of a button to avoid being able to click outside of the image area

Approved-by: Bianca Widstam
Approved-by: Chuma Mcphoy (We Ahead)

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -85,7 +85,7 @@ export default function Gallery({
   }
 
   return (
-    <div className={styles.galleryContainer}>
+    <div className={styles.gallery}>
       <IconButton
         theme="Black"
         style="Muted"
@@ -112,17 +112,17 @@ export default function Gallery({
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
         <Typography variant="Body/Supporting text (caption)/smRegular">
-          <p className={styles.galleryHeader}>
+          <p className={styles.header}>
             {mainImage.caption && !hideLabel && (
-              <span className={styles.imageCaption}>{mainImage.caption}</span>
+              <span className={styles.caption}>{mainImage.caption}</span>
             )}
           </p>
         </Typography>
-        <div className={styles.mainImageWrapper}>
+        <div className={styles.content}>
           <AnimatePresence initial={false} custom={animateLeft}>
             <motion.div
               key={mainImage.src}
-              className={styles.mainImageContainer}
+              className={styles.motionContainer}
               custom={animateLeft}
               variants={variants}
               initial="initial"
@@ -130,21 +130,19 @@ export default function Gallery({
               exit="exit"
               transition={{ duration: 0.3 }}
             >
-              <ButtonRAC
-                onPress={onImageClick}
-                className={styles.imageButton}
+              <Image
+                src={mainImage.src}
+                alt={mainImage.alt}
+                fill
+                sizes="(min-width: 1000px) 1000px, 100vw"
+                className={styles.mainImage}
+                onClick={onImageClick}
+                tabIndex={0}
                 aria-label={intl.formatMessage({
                   defaultMessage: 'Open image',
                 })}
-              >
-                <Image
-                  src={mainImage.src}
-                  alt={mainImage.alt}
-                  fill
-                  sizes="(min-width: 1000px) 1000px, 100vw"
-                  className={styles.image}
-                />
-              </ButtonRAC>
+                role="button"
+              />
             </motion.div>
           </AnimatePresence>
           <motion.button