/*
 * Editorial Hero — STRUCTURAL styles only (layering). Colors, fonts, padding, content
 * placement, and the no-image fallback background are the site's job (override freely;
 * single-class selectors).
 *
 * Grid stack: media and overlay occupy the same grid cell, so the overlay sits over the
 * image when present, and — when there is no image — the overlay alone defines the height
 * (nothing collapses). Give .editorial-hero a min-height / background in your site CSS for
 * the no-image case.
 */
.editorial-hero {
    display: grid;
}
.editorial-hero__media,
.editorial-hero__content {
    grid-area: 1 / 1;
}
.editorial-hero__media {
    margin: 0;
}
.editorial-hero__media img,
.editorial-hero__media video {
    display: block;
    width: 100%;
    height: auto;
}