## 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/humalike-x-gta-rp/6ac3c297-ddf9-47c3-9f0d-e872104f2707-1790575368-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/humalike-x-gta-rp/6ac3c297-ddf9-47c3-9f0d-e872104f2707-1790575278727-full.webp
- Component on Kage: https://kage.design/component/humalike-x-gta-rp-feature-grid

## Before you start
Ask what capabilities matter most for the user's product and what real-world moments best communicate them. Then apply the principles below to those capabilities.

Create a vertical feature-story grid made of several full-width, rounded media panels. Each panel should use a different responsive background image or video, a dark readability overlay where needed, and a compact text card positioned over one side. Alternate left and right card placement between rows. Keep each story focused on one capability: a short bold heading, one sentence of context, and a brief bulleted list of concrete outcomes. Maintain consistent panel height, 8–12px gaps, 12–16px corner radii, and generous internal padding.

Use black or white cards according to image contrast: #050505eF for dark cards, #fffefaF2 for light cards, near-black #101010 for headings, and muted gray #686762 for body copy. Use heavy sans-serif headings with tight line-height, 15–18px body text, subtle card shadows, and no decorative clutter. On mobile, stack the card into normal flow near the bottom of each image and preserve readable contrast. Add only light hover motion to media; do not make text cards jump.

### Never
- Never use logos, product names, copy, illustrations, or imagery from the reference.
- Never copy the six reference headings, bullet lists, scenes, or exact alternating layout content.