:root { --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --gutter: 16px; }
.container { width: 100%; margin: 0 auto; padding: 0 16px; max-width: var(--container-sm); }
@media (min-width: 768px) { .container { max-width: var(--container-md); } }
@media (min-width: 1024px) { .container { max-width: var(--container-lg); } }
@media (min-width: 1280px) { .container { max-width: var(--container-xl); } }
.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.col-1 { grid-column: span 1 / span 1; }
.col-2 { grid-column: span 2 / span 2; }
.col-3 { grid-column: span 3 / span 3; }
.col-4 { grid-column: span 4 / span 4; }
.col-5 { grid-column: span 5 / span 5; }
.col-6 { grid-column: span 6 / span 6; }
.col-7 { grid-column: span 7 / span 7; }
.col-8 { grid-column: span 8 / span 8; }
.col-9 { grid-column: span 9 / span 9; }
.col-10 { grid-column: span 10 / span 10; }
.col-11 { grid-column: span 11 / span 11; }
.col-12 { grid-column: span 12 / span 12; }
@media (min-width: 640px) { .sm-col-6 { grid-column: span 6 / span 6; } .sm-col-4 { grid-column: span 4 / span 4; } .sm-col-8 { grid-column: span 8 / span 8; } }
@media (min-width: 768px) { .md-col-6 { grid-column: span 6 / span 6; } .md-col-4 { grid-column: span 4 / span 4; } .md-col-8 { grid-column: span 8 / span 8; } }
@media (min-width: 1024px) { .lg-col-6 { grid-column: span 6 / span 6; } .lg-col-4 { grid-column: span 4 / span 4; } .lg-col-8 { grid-column: span 8 / span 8; } }
.row.g-8 { gap: 8px; } .row.g-16 { gap: 16px; } .row.g-24 { gap: 24px; } .row.g-32 { gap: 32px; }