.hero-slider {
    aspect-ratio: auto;
}

@media (min-width: 641px) {
    .hero-slider {
        height: calc(100dvh - var(--header-h));
        min-height: min(600px, calc(100dvh - var(--header-h)));
    }
}

@media (min-width: 641px) and (max-height: 850px) {
    .hero-content {
        padding-top: var(--sp-8);
        padding-bottom: calc(var(--sp-16) + var(--sp-12));
    }

    .hero-title {
        margin-bottom: var(--sp-4);
        font-size: clamp(2.5rem, 5vw, 4.5rem);
    }

    .hero-support p {
        margin-bottom: var(--sp-4);
        font-size: var(--fs-base);
    }

    .hero-controls {
        bottom: var(--sp-8);
    }
}

.hero-load-error {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--header-h);
}

.hero-load-error h1,
.hero-load-error p {
    color: var(--c-text-invert);
}