fix(SW-337): better desktop gallery layout

components/Lightbox/Gallery.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { DialogTitle } from "@radix-ui/react-dialog"
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 import { AnimatePresence, motion } from "framer-motion"
 
 import { ChevronRightIcon } from "@/components/Icons"
@@ -55,14 +56,17 @@ export default function Gallery({
       </Button>
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
-        <div className={styles.galleryHeader}>
+        <VisuallyHidden asChild>
           <DialogTitle asChild>
-            <div className={styles.imageCaption}>
-              {mainImage.title && (
-                <Caption color="textMediumContrast">{mainImage.title}</Caption>
-              )}
-            </div>
+            <VisuallyHidden>Image Gallery</VisuallyHidden>
           </DialogTitle>
+        </VisuallyHidden>
+        <div className={styles.galleryHeader}>
+          {mainImage.title && (
+            <div className={styles.imageCaption}>
+              <Caption color="textMediumContrast">{mainImage.title}</Caption>
+            </div>
+          )}
         </div>
         <div className={styles.mainImageWrapper}>
           <AnimatePresence initial={false} mode="wait">
@@ -99,7 +103,7 @@ export default function Gallery({
             <ArrowRightIcon color="burgundy" />
           </motion.button>
         </div>
-        <div className={styles.thumbnailGrid}>
+        <div className={styles.desktopThumbnailGrid}>
           <AnimatePresence initial={false}>
             {getThumbImages().map((image, index) => (
               <motion.div