/* css/layout/grid.css */
.container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto; /* Logical property: handles LTR/RTL margins automatically */
    padding-inline: var(--sp-3); /* 24px padding on sides */
}

@media (min-width: 768px) {
    .container { padding-inline: var(--sp-6); }
}

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

/* Utility Grids */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

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

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

.align-center {
    align-items: center;
}