## 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/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146456-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/meetup-com/38f9f6c4-75f1-46e9-b1c3-f8b44b19e777-1789146409864-full.webp
- Component on Kage: https://kage.design/component/meetup-feature-grid-2

## Before you start
Ask what the user's product does, who it serves, and what its brand personality and visual identity are. Then apply the principles below to that product rather than reproducing the reference.

Create a compact online-content rail using the same reusable event-card system as the local discovery section, but distinguish remote items with a small platform or format indicator in the metadata. Use a section heading and right-aligned browse link, four cards on desktop, and a responsive horizontal scroll or stacked grid on smaller screens. Preserve consistent 16:9 media, 14–18px radius, title clamping, muted metadata, 24px gutters, and generous whitespace. Approximate colours: #FFFFFF background, #202020 text, #707070 metadata, #E9E9E9 badges, and a restrained brand accent. Add accessible hover/focus treatment and ensure image alt text and event status are available to screen readers.

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