@media (max-width: 900px) {
    .container {
        width: min(calc(100% - 32px), var(--container));
    }

    .hero__container {
        grid-template-columns: 1fr;
        gap: 56px;
        padding-block: 80px;
    }

    .hero__visual {
        width: min(100%, 560px);
    }
}

@media (max-width: 600px) {
    .hero__container {
        padding-block: 64px;
    }

    .hero__title {
        font-size: clamp(52px, 16vw, 76px);
    }

    .hero__intro {
        margin-top: 28px;
        font-size: 16px;
    }

    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero__visual {
        min-height: 340px;
    }

    .hero__scroll {
        display: none;
    }
}