@media (min-width: 640px) {
    .grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cta-band {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 1.7rem;
    }

    .split {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
    }

    .contact-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .site-footer__grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .site-footer__meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .zone__grid {
        grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 1fr);
        gap: 1.75rem;
    }

    .zone__copy .section__header {
        margin-inline: 0;
        margin-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1.35fr 0.9fr 1fr 1.1fr;
    }

    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .zone__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 1fr);
        gap: 2rem;
    }

    .zone__copy {
        text-align: left;
        padding-inline: 0;
    }

    .zone__copy .section__header {
        margin-inline: 0;
        margin-bottom: 0;
        max-width: none;
    }

    .zone__photo img {
        min-height: 14rem;
        max-height: 18rem;
    }
}

@media (min-width: 1280px) {
    .hero__grid {
        gap: 2.4rem;
    }

    .card__body {
        padding: 1.3rem 1.3rem 1.1rem;
    }
}

@media (min-width: 1536px) {
    :root {
        --container-max: 78rem;
        --container-wide: 86rem;
    }
}

@media (min-width: 1920px) {
    :root {
        --container-max: 84rem;
        --container-wide: 92rem;
    }

    .hero__grid {
        min-height: 38rem;
    }
}

@media (max-width: 639px) {
    .hero__actions .btn {
        width: 100%;
    }

    .header-aside .btn {
        width: 100%;
        justify-content: center;
    }
}