/* Grid / Row-Column Utilities */
:root {
    --cols: 12;
    --gap: 1rem;
}

/* CSS Grid container with configurable column count and gap */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 12), 1fr);
    gap: var(--gap, 1rem);
}

/* common fixed column counts */
.grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
.grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
.grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
.grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
.grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

/* grid column span helpers */
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-9  { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Flexbox row/column helpers for simpler layouts */
.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 1rem);
}

.col {
    flex: 1 1 0%;
    min-width: 0;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

/* 12-column percentage-based flex widths */
.col-1  { flex: 0 1 calc(95% * 1 / 12);  max-width: calc(95% * 1 / 12); }
.col-2  { flex: 0 1 calc(95% * 2 / 12);  max-width: calc(95% * 2 / 12); }
.col-3  { flex: 0 1 calc(95% * 3 / 12);  max-width: calc(95% * 3 / 12); }
.col-4  { flex: 0 1 calc(95% * 4 / 12);  max-width: calc(95% * 4 / 12); }
.col-5  { flex: 0 1 calc(95% * 5 / 12);  max-width: calc(95% * 5 / 12); }
.col-6  { flex: 0 1 calc(95% * 6 / 12);  max-width: calc(95% * 6 / 12); }
.col-7  { flex: 0 1 calc(95% * 7 / 12);  max-width: calc(95% * 7 / 12); }
.col-8  { flex: 0 1 calc(95% * 8 / 12);  max-width: calc(95% * 8 / 12); }
.col-9  { flex: 0 1 calc(95% * 9 / 12);  max-width: calc(95% * 9 / 12); }
.col-10 { flex: 0 1 calc(95% * 10 / 12); max-width: calc(95% * 10 / 12); }
.col-11 { flex: 0 1 calc(95% * 11 / 12); max-width: calc(95% * 11 / 12); }
.col-12 { flex: 0 1 calc(95% * 12 / 12); max-width: calc(95% * 12 / 12); }

/* Alignment helpers */
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }

/* Small responsive helper: stack columns on narrow screens */
@media (max-width: 900px) {
    .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .grid { grid-template-columns: 1fr; }

    .col-md-1  { flex: 0 1 calc(95% * 1 / 12);  max-width: calc(95% * 1 / 12); }
    .col-md-2  { flex: 0 1 calc(95% * 2 / 12);  max-width: calc(95% * 2 / 12); }
    .col-md-3  { flex: 0 1 calc(95% * 3 / 12);  max-width: calc(95% * 3 / 12); }
    .col-md-4  { flex: 0 1 calc(95% * 4 / 12);  max-width: calc(95% * 4 / 12); }
    .col-md-5  { flex: 0 1 calc(95% * 5 / 12);  max-width: calc(95% * 5 / 12); }
    .col-md-6  { flex: 0 1 calc(95% * 6 / 12);  max-width: calc(95% * 6 / 12); }
    .col-md-7  { flex: 0 1 calc(95% * 7 / 12);  max-width: calc(95% * 7 / 12); }
    .col-md-8  { flex: 0 1 calc(95% * 8 / 12);  max-width: calc(95% * 8 / 12); }
    .col-md-9  { flex: 0 1 calc(95% * 9 / 12);  max-width: calc(95% * 9 / 12); }
    .col-md-10 { flex: 0 1 calc(95% * 10 / 12); max-width: calc(95% * 10 / 12); }
    .col-md-11 { flex: 0 1 calc(95% * 11 / 12); max-width: calc(95% * 11 / 12); }
    .col-md-12 { flex: 0 1 calc(95% * 12 / 12); max-width: calc(95% * 12 / 12); }
}