4 hero shapes, 3 skins

Each one is a <section data-block-name> that owns its own theme and padding. Pick a row, copy the props, and the skin is the theme value in the heading above the instance.

1. Hero, standardThe first screen of a route: one title over the theme ground, with a line of metadata under it. The page scrolls on immediately.title, theme, meta[]
2. Hero, standard, with mediaThe same block with an asset under the title, at 16 / 9. The picture sits below the type rather than behind it.title, theme, media, meta[]
3. Hero, full screen, plainOne screen tall on the theme ground, the title at display scale with nothing behind it. A gradient canvas can mount in the same slot later without the type moving.title, eyebrow, theme, meta[], align, cue
4. Hero, full screen, mediaOne screen tall with the asset behind the type and a scrim over it. The scrim is measured, not assumed: white type over a light picture fails contrast without one.title, eyebrow, theme, media, meta[], align, cue