.hero {
    height: max(min(1080px, 100lvh), 777px);
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .hero {
        height: max(min(1080px, 50lvh), 550px);
    }
}

*:has(>.hero-bottom) {
    height: 100%;
}

.hero-bottom {
    position: absolute;
    width: calc(100% - var(--global-content-edge-padding)*2);
    max-width: 900px;
    bottom: 100px;
    left: var(--global-content-edge-padding);
}

@media (max-width: 767px) {
    .hero-bottom {
        top: calc(100% + 50px);
        bottom: unset;
    }
}