## 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/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192911-4.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/raycast-2-0/585c4674-841f-40bf-a211-e6fd2d8f71e9-1789192849096-full.webp
- Component on Kage: https://kage.design/component/raycast-2-0-gallery

## Before you start
Ask what product capabilities should be showcased, which screenshots or demos exist, and which item deserves visual priority. Apply these principles to that product rather than reproducing the reference.

Build a dark feature gallery section with a centered two-line heading: a muted first line and a brighter second line, approximately 24px with tight line-height. Below it, use a responsive CSS grid with a large asymmetric primary card and smaller secondary cards. Cards should have near-black charcoal surfaces (#111214), 1px borders around #242629, 10px radius, and overflow hidden. Put product visuals in the upper areas with subtle dark overlays, then anchor concise white titles and muted descriptions near the lower edge. Use a 2-column layout for the main row and a 3-column row for compact items, with 16px gaps; preserve deliberate asymmetry rather than making every tile identical. Add a small centered text link below the grid. Provide hover behavior: slight border brightening, a 1–2px lift, and gentle image scale. Stack all cards on mobile.

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