/* Responsive */

@media (max-width: 1100px) {
    .works-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1000px) {
    .hero {
        background-position: 80% center;
    }
}

@media (max-width: 800px) {
    .about {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: left;
    }

    .about__text {
        width: 100%;
    }

    .contacts-list {
        grid-template-columns: 1fr;
    }

    .catalog-form__row {
        grid-template-columns: 1fr;
    }

    .catalog-form__submit {
        width: 100%;
    }

    .section-indicator {
        display: none;
    }
}


@media (max-width: 700px) {
    .hero {
        background-position: 70% center;
    }
}

@media (max-width: 640px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        display: none;
        position: absolute;
        top: calc(100% - 0.25rem);
        left: 1rem;
        right: 1rem;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem;
        background: var(--color-surface);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        z-index: 30;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        color: var(--color-ink);
        padding: 0.85rem 1rem;
    }

    .site-nav a::after {
        display: none;
    }

    .works-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

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

    .hero__actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .bg-layers__far,
    .bg-layers__mid {
        will-change: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}