## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/app-store-screenshots/ebba8a13-8dd3-48a7-9b23-a1c0db4171af-1793253672-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/app-store-screenshots/ebba8a13-8dd3-48a7-9b23-a1c0db4171af-1793253637144-full.webp
- Component on Kage: https://kage.design/component/app-store-screenshots-gallery-3

## Before you start
Ask what the user's product, brand, content variants, and desired selection interaction are, then apply these principles to that product.

Build a style-variation gallery with a centered heading and a large featured preview area containing two or three related cards. Use distinct but coordinated visual themes to show range, while keeping card dimensions and alignment consistent. Add a short descriptor, dot pagination, a thumbnail rail for quick selection, and a secondary text link to browse all variants. Use a white background, 12–18px card radii, soft shadows, and generous whitespace. Make the carousel draggable only if it remains keyboard accessible; provide previous/next buttons, labeled pagination, reduced-motion behavior, and a responsive thumbnail strategy.

Never:
- use logos, product names, copy, illustrations, or imagery from the reference
- copy the exact styles, card artwork, or carousel labels
- autoplay content or make the thumbnails the only navigation