.hero {
    --font-size-h1-base: 7rem;
    --parallax-offset: var(--offset);
    display: grid;
    min-height: min(50vw, 65rem)
}

.hero .wrapper,
.hero .module__background {
    --parallax-origin: 0px;
    opacity: max(.25, 1 - (var(--scroll-y) - var(--offset))/500)
}

.hero .module__background {
    --parallax-ratio: .6
}

.hero .wrapper {
    --parallax-offset: inherit;
    --parallax-ratio: .5;
    position: relative;
    z-index: 10;
    place-items: flex-start;
    grid-template-rows: 1fr 1fr auto 2fr 4rem;
    gap: 3rem;
    height: 100%
}

@media (max-width: 1023px) {
    .hero .wrapper {
        grid-template-rows: 5rem 1fr auto auto
    }
}

@media (max-width: 1023px) {
    .hero .rich-text {
        text-wrap: balance
    }
}

.hero:has(.logo) .wrapper {
    grid-template-columns: auto 1fr;
    align-items: center
}

.hero:has(.logo) .heading,
.hero:has(.logo) .rich-text {
    grid-column: span 2
}