.container {
    width: min(var(--container-width), 92%);
    margin-inline: auto;
}

section {
    padding-block: var(--section-space);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
}

@media (min-width: 1600px) {
    :root {
        --container-width: 1280px;
    }
}

@media (max-width: 1040px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    :root {
        --section-space: 72px;
    }
}