Gallery & lightbox
A photo grid inside an article, and the click-to-enlarge view every article image can use.
Click a photo <Gallery photos={[{ src: '/about/family.webp', alt: '…' }, …]} />
- Gallery: full grid width, 2 columns on mobile and 3 from 744; every photo cropped to the same 4:3.
- Lightbox: any
img[data-zoom] opens full-size; click or Esc closes. ArticleLayout includes it once per page.
| Prop | Type | Default | Description |
|---|
photos | { src; alt }[] | — | Every photo needs real alt text. |
| Token | Base | ≥ 744 | Note |
--gallery-columns | repeat(2, minmax(0, 1fr)) | repeat(3, minmax(0, 1fr)) | photo grid (About) |
--gallery-ratio | 4 / 3 | | |
--color-backdrop | var(--color-black-transparent-85) | | image lightbox |
