@layer components {

    .page-hero {
        max-width: var(--w-page);
        margin-inline: auto;
        padding: var(--s-7) var(--gutter) 0;
    }

    .page-hero__body {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: var(--s-4);
    }

    .page-hero__title {
        max-width: 18ch;
        font-size: var(--t-3xl);
    }

    .page-hero__text {
        max-width: 60ch;
        font-size: var(--t-md);
        color: var(--c-muted);
    }

    .page-hero__text:empty {
        display: none;
    }

    .page-hero--media {
        display: grid;
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: var(--s-7);
        align-items: stretch;
    }

    .page-hero--media .page-hero__body {
        padding-block: var(--s-7);
    }

    .page-hero__media {
        align-self: center;
        width: 100%;
        min-width: 0;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .page-hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .page-hero--center {
        padding-top: var(--s-8);
        padding-bottom: var(--s-8);
        border-bottom: 1px solid var(--c-line);
    }

    .page-hero--center .page-hero__body {
        justify-items: center;
        text-align: center;
    }

    .page-hero--center .page-hero__title {
        max-width: 20ch;
    }

    @media (max-width: 899px) {
        .page-hero--media {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--s-5);
        }

        .page-hero--media .page-hero__body {
            padding-block: 0;
        }

        .page-hero--center {
            padding-block: var(--s-7);
        }
    }

}