/* ── Layout System ────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

@media (min-width: 640px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }

/* Card grids */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-8);
}

.card-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Two-column layout with image */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
}

@media (min-width: 768px) {
    .two-col {
        grid-template-columns: 1fr 1fr;
    }
    .two-col--60-40 {
        grid-template-columns: 3fr 2fr;
    }
}