.layout--hero {
    --banner-max-height: 100dvh;
    --text-color-override: theme('colors.zinc.700');
    @apply overflow-hidden min-h-[var(--banner-min-height,theme(space.72))] max-h-[var(--banner-max-height-override,var(--banner-max-height))];

    text-align: var(--text-align, left);

    .media__figure figcaption {
        display: var(--banner-media-figcaption-override, none);
    }

    .media__figure img {
        @apply object-cover object-center align-top w-full h-full max-h-[var(--banner-max-height-override,var(--banner-max-height))];
    }

    &:is(.centered) {
        @apply text-center;
    }
}
