## 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/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146825-5.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/bilt-com/b723ca8c-1652-4a12-a0a7-d6e12612eb4d-1789146766657-full.webp
- Component on Kage: https://kage.design/component/bilt-gallery-2

## Before you start
Ask what the user's product, audience, and brand are. Translate the same editorial card pattern into the user's relevant use cases.

Create a three-card visual gallery for everyday use cases. Use equal-width landscape images with carefully cropped original photography, then place a dark translucent caption bar near the bottom containing a compact icon, a bold benefit phrase, and a smaller qualifier. Keep the cards close together so the row feels like a curated collection rather than isolated tiles.

Design language: background #020b15, image cards with 12–16px radius and overflow hidden, caption overlays around rgba(20,25,28,.88), primary text #f4f7f8, secondary text #b1bcc3, and accent icons in pale blue or warm gold. Use 20–24px gaps, 16px caption padding, and a minimum 220px card height. Add subtle image scale on hover and keyboard-visible focus rings. Stack cards on small screens or use a snap-scrolling rail with the next card partially visible.

Never: use logos, product names, copy, illustrations, or imagery from the reference.