ImageGallery: landscape thumbnails (4:3 ratio)

- Thumbnails now 4:3 aspect ratio instead of square
- Renamed thumbnailSize → thumbnailHeight, width calculated from ratio
- Default 64px height × 85px width

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/molecules/ImageGallery/ImageGallery.stories.tsx

@@ -71,6 +71,6 @@ export const CustomSizes: Story = {
   args: {
     images: venueImages,
     heroHeight: 300,
-    thumbnailSize: 56,
+    thumbnailHeight: 48,
   },
 };

src/components/molecules/ImageGallery/ImageGallery.tsx

@@ -18,8 +18,8 @@ export interface ImageGalleryProps {
   images: GalleryImage[];
   /** Height of the hero image area */
   heroHeight?: number | { xs?: number; sm?: number; md?: number; lg?: number };
-  /** Height of each thumbnail */
-  thumbnailSize?: number;
+  /** Height of each thumbnail (width is 4:3 ratio) */
+  thumbnailHeight?: number;
   /** MUI sx prop for style overrides */
   sx?: SxProps<Theme>;
 }
@@ -47,7 +47,8 @@ export interface ImageGalleryProps {
  * ```
  */
 export const ImageGallery = React.forwardRef<HTMLDivElement, ImageGalleryProps>(
-  ({ images, heroHeight = { xs: 280, md: 420 }, thumbnailSize = 72, sx }, ref) => {
+  ({ images, heroHeight = { xs: 280, md: 420 }, thumbnailHeight = 64, sx }, ref) => {
+    const thumbnailWidth = Math.round(thumbnailHeight * (4 / 3));
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [hoverIndex, setHoverIndex] = React.useState<number | null>(null);
 
@@ -123,8 +124,8 @@ export const ImageGallery = React.forwardRef<HTMLDivElement, ImageGalleryProps>(
               onMouseEnter={() => setHoverIndex(index)}
               onMouseLeave={() => setHoverIndex(null)}
               sx={{
-                width: thumbnailSize,
-                height: thumbnailSize,
+                width: thumbnailWidth,
+                height: thumbnailHeight,
                 flexShrink: 0,
                 borderRadius: 1,
                 backgroundImage: `url(${image.src})`,