:where(.hero-simple) {

    .hero-top {
        padding-top: 28rem;
        background-image: url("../images/home-hero-background-img.jpg");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        max-width: 100dvw;
    }

    /* L2 section pages: clear the absolute header (logo block ~19rem tall) and leave a
       comfortable gap below the logo before the section nav. */
    &.hero-has-section-nav .hero-top {
        padding-top: 25rem;
    }

    .region {
        padding-block: var(--size-small);
        border-bottom: var(--color-medium-grey) 2px solid;
    }

    .header {
        font-size: 3rem;
    }


    /* Article pages: mirror the L2 layout — a hero-top spacer behind the absolute header,
       then a thin breadcrumbs bar below it with its own gradient-image background
       (the same image as the main nav). */
    &.article {
        .hero-top {
            padding-top: 25rem;
        }

        .article-breadcrumbs-bar {
            /* light white wash laid over the gradient image */
            background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("../images/home-hero-background-img.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            max-width: 100dvw;
        }

        /* breadcrumbs row inside the bar — no divider border, vertically centered */
        .region {
            padding-block: var(--size-small);
            border-bottom: 0;
        }

        .breadcrumbs-wrapper {
            margin-bottom: 0;
        }
    }

}