Media

Golden-ratio media that covers its box, with a caption overlaid on a dark gradient.

.mediaCSS only

Examples

Aurora 02

`figure.media`	Golden-ratio box on a tinted fill, clipping its content.
`> img \| > video \| > div`	The media, stretched to cover the box.
`> figcaption`	Optional caption laid over the bottom edge in light text on a gradient.

An <img> inside needs alt. When the <figcaption> already describes it, alt="" avoids reading the same thing twice.
The caption sits on whatever the image shows. The gradient keeps it readable on most images; check it on very light ones.