/* ===== Micro Grid (12-col) with responsive spans ===== */
.grid { display: grid; gap: var(--grid-gap, 1rem); grid-template-columns: repeat(12, 1fr); }
.gap-0 { --grid-gap: 0; } .gap-1 { --grid-gap: .5rem; } .gap-2 { --grid-gap: 1rem; }
.gap-3 { --grid-gap: 1.5rem; } .gap-4 { --grid-gap: 2rem; }
.col-1 {grid-column:span 1}.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
.col-5 {grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9 {grid-column:span 9}.col-10{grid-column:span 10}.col-11{grid-column:span 11}.col-12{grid-column:span 12}
@media (max-width: 479px){ .grid { grid-template-columns: 1fr; } }
@media (min-width:480px){
.sm-col-1 {grid-column:span 1}.sm-col-2{grid-column:span 2}.sm-col-3{grid-column:span 3}.sm-col-4{grid-column:span 4}
.sm-col-5 {grid-column:span 5}.sm-col-6{grid-column:span 6}.sm-col-7{grid-column:span 7}.sm-col-8{grid-column:span 8}
.sm-col-9 {grid-column:span 9}.sm-col-10{grid-column:span 10}.sm-col-11{grid-column:span 11}.sm-col-12{grid-column:span 12}
}
@media (min-width:768px){
.md-col-1 {grid-column:span 1}.md-col-2{grid-column:span 2}.md-col-3{grid-column:span 3}.md-col-4{grid-column:span 4}
.md-col-5 {grid-column:span 5}.md-col-6{grid-column:span 6}.md-col-7{grid-column:span 7}.md-col-8{grid-column:span 8}
.md-col-9 {grid-column:span 9}.md-col-10{grid-column:span 10}.md-col-11{grid-column:span 11}.md-col-12{grid-column:span 12}
}
@media (min-width:1024px){
.lg-col-1 {grid-column:span 1}.lg-col-2{grid-column:span 2}.lg-col-3{grid-column:span 3}.lg-col-4{grid-column:span 4}
.lg-col-5 {grid-column:span 5}.lg-col-6{grid-column:span 6}.lg-col-7{grid-column:span 7}.lg-col-8{grid-column:span 8}
.lg-col-9 {grid-column:span 9}.lg-col-10{grid-column:span 10}.lg-col-11{grid-column:span 11}.lg-col-12{grid-column:span 12}
}
@media (min-width:1280px){
.xl-col-1 {grid-column:span 1}.xl-col-2{grid-column:span 2}.xl-col-3{grid-column:span 3}.xl-col-4{grid-column:span 4}
.xl-col-5 {grid-column:span 5}.xl-col-6{grid-column:span 6}.xl-col-7{grid-column:span 7}.xl-col-8{grid-column:span 8}
.xl-col-9 {grid-column:span 9}.xl-col-10{grid-column:span 10}.xl-col-11{grid-column:span 11}.xl-col-12{grid-column:span 12}
}