:where(.l2-hero) {
    container: l2-hero / inline-size;
    min-height: 35rem;
    max-height: 35rem;
    display: grid;
    align-content: end;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 1440 598'%3E%3Cg fill='%23fff' fill-opacity='.3'%3E%3Cpath d='M773 466C377 274 168 363 26 405c125-84 338-192 705 7 328 178 577 140 683 65 51-35 81-88 81-141 0 0 0 83-94 110-240 71-420 11-711-154-468-267-632 72-792 70-64-19-106-92-81-210 7-32 66-182 282-140 0 0-212-76-324 152-73 148 38 363 219 352 84 130 399-41 771 46l123 30c-28-10-68-23-94-35-314-132-571-66-725-64 113-36 298-111 691 21 327 109 576 121 693-19-31 34-286 162-680-29'/%3E%3Cpath d='M1481 306c-98 104-400 110-809-55 289 200 780 279 809 55'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(265.29deg, rgba(0, 105, 170, 0.25) 13.55%, #0069AA 99.93%),
    var(--l2HeroBackgroundImage, none);

    background-repeat: no-repeat;
    background-size: cover;
    /* Wave crop for the 35rem band: 70% put the curves behind the heading, so the whole
       overlay is pushed a further 30rem down — only its leading crest reads along the bottom
       and the heading sits on clean gradient. */
    background-position-y: 50%, top, var(--l2HeroBackgroundImagePostionY, top);
    background-position-x: 0, center, var(--l2HeroBackgroundImagePostionX, center);

    :where(& > .region) {
        width: 100%;

        :where(& > .heading) {
            margin: 0;
            padding: 0;
            color: var(--color-primary-white);
            margin-block-end: var(--size-medium);
            font-weight: 700;
            font-family: var(--font-family-main-condensed), sans-serif;
        }
    }
}

/* The region only insets the heading once there is room for its max-width to bite; below that it
   spans the full width and the heading ends up against the screen edge. Pad it so the heading
   lines up with the content components, which do the same at this width.
   112rem = content-width-large, 4rem = minimum-inline-padding. */
@container l2-hero (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.l2-hero > .region) {
        padding-inline: var(--minimum-inline-padding);
    }
}