.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap, 1rem);
}

.grid > * {
    grid-column: span 12;
}

.gap-xs { --grid-gap: 0.25rem; }
.gap-sm { --grid-gap: 0.5rem; }
.gap-md { --grid-gap: 1rem; }
.gap-lg { --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; }

/* sm ≥ 640px */
@media (min-width: 640px) {
    .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; }
}

/* md ≥ 768px */
@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; }
}

/* lg ≥ 1024px */
@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; }
}

/* xl ≥ 1280px */
@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; }
}