/* ---------------------------------------------------- */
/* --- Base Grid Setup (Matches your definition) --- */
/* ---------------------------------------------------- */
.grid {
    display: grid;
    /* Defines 12 equal-width columns */
    grid-template-columns: repeat(12, 1fr); 
    width: 100%;
    margin: 0 auto;
    /* Optional: Add a gap between columns */
    /* gap: 20px; */ 
}

/* ---------------------------------------------------- */
/* --- Column Spanning (Replaces the 'width' property) --- */
/* ---------------------------------------------------- */

/* All items inside the grid (replace with a more specific selector if needed) */
.grid > * {
    /* Ensure items start at the next available track (column) */
    grid-column-start: auto;
}

/* 1 Column (8.3333%) */
.s-1, .grid .s-1, .grid .s-1.center {
    grid-column-end: span 1;
}

/* 2 Columns (16.6666%) */
.s-2, .grid .s-2, .grid .s-2.center {
    grid-column-end: span 2;
}

/* 3 Columns (25%) */
.s-3, .grid .s-3, .grid .s-3.center {
    grid-column-end: span 3;
}

/* 4 Columns (33.3333%) */
.s-4, .grid .s-4, .grid .s-4.center {
    grid-column-end: span 4;
}

/* 5 Columns (41.6666%) */
.s-5, .grid .s-5, .grid .s-5.center {
    grid-column-end: span 5;
}

/* Custom 5-unit span (20% in your original logic, but 5/12 in a 12-col grid) */
/* Note: I've included .s-five here, mapping it to 5/12 columns (41.6666%) */
.s-five, .grid .s-five {
    grid-column-end: span 5;
}

/* 6 Columns (50%) */
.s-6, .grid .s-6, .grid .s-6.center {
    grid-column-end: span 6;
}

/* 7 Columns (58.3333%) */
.s-7, .grid .s-7, .grid .s-7.center {
    grid-column-end: span 7;
}

/* 8 Columns (66.6666%) */
.s-8, .grid .s-8, .grid .s-8.center {
    grid-column-end: span 8;
}

/* 9 Columns (75%) */
.s-9, .grid .s-9, .grid .s-9.center {
    grid-column-end: span 9;
}

/* 10 Columns (83.3333%) */
.s-10, .grid .s-10, .grid .s-10.center {
    grid-column-end: span 10;
}

/* 11 Columns (91.6666%) */
.s-11, .grid .s-11, .grid .s-11.center {
    grid-column-end: span 11;
}

/* 12 Columns (100%) */
.s-12, .grid .s-12, .grid .s-12.center {
    grid-column-end: span 12;
}