/* Shared responsive layout rules.
   Section-specific breakpoints live beside their section styles. */

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

@media (max-width: 700px) {
    .container {
        width: calc(100% - 32px);
    }
}

@media (max-width: 420px) {
    .container {
        width: calc(100% - 24px);
    }
}