/* Container (optional) */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Row: horizontal flex container */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.5rem; /* Negative margin to offset gutter */
    margin-right: -0.5rem;
}

/* Column padding (gutter) */
.col,
.col-*,
[class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    flex-shrink: 0;
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

/* Auto column width based on content */
.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

/* Full-width column (fills row) */
.col {
    flex: 1 0 0%; /* Grow and fill available space */
}

/* Fixed width columns: 1 to 24 */
/* Each col-n takes n/24 of the row width */

/* Generate widths: width = (n / 24) * 100% */
.col-1  { flex: 0 0 calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
.col-2  { flex: 0 0 calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
.col-3  { flex: 0 0 calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
.col-4  { flex: 0 0 calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
.col-5  { flex: 0 0 calc(100% / 24 * 5); max-width: calc(100% / 24 * 5); }
.col-6  { flex: 0 0 calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
.col-7  { flex: 0 0 calc(100% / 24 * 7); max-width: calc(100% / 24 * 7); }
.col-8  { flex: 0 0 calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
.col-9  { flex: 0 0 calc(100% / 24 * 9); max-width: calc(100% / 24 * 9); }
.col-10 { flex: 0 0 calc(100% / 24 * 10); max-width: calc(100% / 24 * 10); }
.col-11 { flex: 0 0 calc(100% / 24 * 11); max-width: calc(100% / 24 * 11); }
.col-12 { flex: 0 0 calc(100% / 24 * 12); max-width: calc(100% / 24 * 12); }
.col-13 { flex: 0 0 calc(100% / 24 * 13); max-width: calc(100% / 24 * 13); }
.col-14 { flex: 0 0 calc(100% / 24 * 14); max-width: calc(100% / 24 * 14); }
.col-15 { flex: 0 0 calc(100% / 24 * 15); max-width: calc(100% / 24 * 15); }
.col-16 { flex: 0 0 calc(100% / 24 * 16); max-width: calc(100% / 24 * 16); }
.col-17 { flex: 0 0 calc(100% / 24 * 17); max-width: calc(100% / 24 * 17); }
.col-18 { flex: 0 0 calc(100% / 24 * 18); max-width: calc(100% / 24 * 18); }
.col-19 { flex: 0 0 calc(100% / 24 * 19); max-width: calc(100% / 24 * 19); }
.col-20 { flex: 0 0 calc(100% / 24 * 20); max-width: calc(100% / 24 * 20); }
.col-21 { flex: 0 0 calc(100% / 24 * 21); max-width: calc(100% / 24 * 21); }
.col-22 { flex: 0 0 calc(100% / 24 * 22); max-width: calc(100% / 24 * 22); }
.col-23 { flex: 0 0 calc(100% / 24 * 23); max-width: calc(100% / 24 * 23); }
.col-24 { flex: 0 0 100%; max-width: 100%; }

/* Equal-width children (like .row > *) */
.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1 > * { flex: 0 0 100%; }
.row-cols-2 > * { flex: 0 0 50%; }
.row-cols-3 > * { flex: 0 0 33.333333%; }
.row-cols-4 > * { flex: 0 0 25%; }
.row-cols-6 > * { flex: 0 0 16.666667%; }
.row-cols-12 > * { flex: 0 0 8.333333%; }

/* Small devices (≥576px) */
@media (min-width: 576px) {
    .col-sm-1  { flex: 0 0 calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
    .col-sm-2  { flex: 0 0 calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
    .col-sm-3  { flex: 0 0 calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
    .col-sm-4  { flex: 0 0 calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
    .col-sm-5  { flex: 0 0 calc(100% / 24 * 5); max-width: calc(100% / 24 * 5); }
    .col-sm-6  { flex: 0 0 calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
    .col-sm-7  { flex: 0 0 calc(100% / 24 * 7); max-width: calc(100% / 24 * 7); }
    .col-sm-8  { flex: 0 0 calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
    .col-sm-9  { flex: 0 0 calc(100% / 24 * 9); max-width: calc(100% / 24 * 9); }
    .col-sm-10 { flex: 0 0 calc(100% / 24 * 10); max-width: calc(100% / 24 * 10); }
    .col-sm-11 { flex: 0 0 calc(100% / 24 * 11); max-width: calc(100% / 24 * 11); }
    .col-sm-12 { flex: 0 0 calc(100% / 24 * 12); max-width: calc(100% / 24 * 12); }
    .col-sm-24 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
    .col-md-1  { flex: 0 0 calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
    .col-md-2  { flex: 0 0 calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
    .col-md-3  { flex: 0 0 calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
    .col-md-4  { flex: 0 0 calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
    .col-md-6  { flex: 0 0 calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
    .col-md-8  { flex: 0 0 calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
    .col-md-12 { flex: 0 0 50%; max-width: 50%; }
    .col-md-24 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
    .col-lg-1  { flex: 0 0 calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
    .col-lg-2  { flex: 0 0 calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
    .col-lg-4  { flex: 0 0 calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
    .col-lg-6  { flex: 0 0 calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
    .col-lg-8  { flex: 0 0 calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
    .col-lg-12 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-16 { flex: 0 0 calc(100% / 24 * 16); max-width: calc(100% / 24 * 16); }
    .col-lg-24 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
    .col-xl-1  { flex: 0 0 calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
    .col-xl-2  { flex: 0 0 calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
    .col-xl-3  { flex: 0 0 calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
    .col-xl-4  { flex: 0 0 calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
    .col-xl-6  { flex: 0 0 calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
    .col-xl-8  { flex: 0 0 calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
    .col-xl-12 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-24 { flex: 0 0 100%; max-width: 100%; }
}