.hero {
    --palette-background-normal: var(--palette-auto-off-normal);
    --palette-foreground-normal: var(--palette-inverse-normal);

    @apply bg-[rgb(var(--palette-background-normal))] flex flex-col items-center
    justify-center px-[var(--spacing-root-medium)] py-[var(--spacing-root-large)]
    text-center text-[rgb(var(--palette-foreground-normal))];

    transition: background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    & > header {
        @apply font-bold leading-[var(--font-headline-line-height-massive)];

        font-size: var(--font-headline-size-massive);
    }

    & > section {
        @apply leading-[var(--font-headline-line-height-tiny)];

        font-size: var(--font-headline-size-tiny);
    }

    & > footer {
        @apply flex items-center gap-[var(--spacing-root-small)] leading-[var(--font-headline-line-height-nano)] max-w-[max-content];

        font-size: var(--font-headline-size-nano);

        &:not(:first-child) {
            @apply mt-[var(--spacing-root-large)];
        }
    }

    & > :is(header, section) {
        @apply max-w-prose;

        &:not(:first-child) {
            @apply mt-[var(--spacing-root-small)];
        }
    }
}