@mixin dark {
    @apply text-zinc-50;
    --hero-bg-override: theme('colors.zinc.800');
    --text-color-override: theme('colors.zinc.50');
    @content;
}

.layout--hero {
    --banner-max-height: 100dvh;
    @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);
    --text-color-override: theme('colors.zinc.700');

    .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))];
    }

    @media (prefers-color-scheme: dark) {
        @include dark;
    }

    &:is(.dark) {
        @include dark;
    }

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