:root {
    --ggs-columns: 12;
    --ggs-gutter:  1.5rem
}

.grid, .grid[class*="col-"] {
    display:         flex;
    justify-content: flex-start;
    flex-wrap:       wrap;
    column-gap:      var(--ggs-gutter, 24px)
}

@media (min-width: 320px) and (max-width: 499px) {
    .grid-xs, .grid-xs[class*="col-"] {
        display:         flex;
        justify-content: flex-start;
        flex-wrap:       wrap;
        column-gap:      var(--ggs-gutter, 24px)
    }
}

@media (min-width: 500px) and (max-width: 799px) {
    .grid-sm, .grid-sm[class*="col-"] {
        display:         flex;
        justify-content: flex-start;
        flex-wrap:       wrap;
        column-gap:      var(--ggs-gutter, 24px)
    }
}

@media (min-width: 800px) and (max-width: 1099px) {
    .grid-md, .grid-md[class*="col-"] {
        display:         flex;
        justify-content: flex-start;
        flex-wrap:       wrap;
        column-gap:      var(--ggs-gutter, 24px)
    }
}

@media (min-width: 1100px) and (max-width: 1599px) {
    .grid-lg, .grid-lg[class*="col-"] {
        display:         flex;
        justify-content: flex-start;
        flex-wrap:       wrap;
        column-gap:      var(--ggs-gutter, 24px)
    }
}

@media (min-width: 1600px) {
    .grid-xl, .grid-xl[class*="col-"] {
        display:         flex;
        justify-content: flex-start;
        flex-wrap:       wrap;
        column-gap:      var(--ggs-gutter, 24px)
    }
}

.grid :where([class*=col-]) {
    position: relative;
    width:    calc((var(--ggs-column) * (100% + var(--ggs-gutter)) - var(--ggs-columns) * var(--ggs-gutter)) / var(--ggs-columns))
}

.col-auto {
    width: auto;
    flex:  1 1 0
}

.col-xs-auto {
    width: auto;
    flex:  1 1 0
}

.col-xs-1 {
    --ggs-column: min(1, var(--ggs-columns))
}

.col-xs-2 {
    --ggs-column: min(2, var(--ggs-columns))
}

.col-xs-3 {
    --ggs-column: min(3, var(--ggs-columns))
}

.col-xs-4 {
    --ggs-column: min(4, var(--ggs-columns))
}

.col-xs-5 {
    --ggs-column: min(5, var(--ggs-columns))
}

.col-xs-6 {
    --ggs-column: min(6, var(--ggs-columns))
}

.col-xs-7 {
    --ggs-column: min(7, var(--ggs-columns))
}

.col-xs-8 {
    --ggs-column: min(8, var(--ggs-columns))
}

.col-xs-9 {
    --ggs-column: min(9, var(--ggs-columns))
}

.col-xs-10 {
    --ggs-column: min(10, var(--ggs-columns))
}

.col-xs-11 {
    --ggs-column: min(11, var(--ggs-columns))
}

.col-xs-12 {
    --ggs-column: min(12, var(--ggs-columns))
}

.gap-xs-1 {
    margin-bottom: 1rem;
}
.gap-xs-2 {
    margin-bottom: 2rem;
}
.gap-xs-3 {
    margin-bottom: 3rem;
}

@media (min-width: 500px) {
    .col-sm-auto {
        width: auto;
        flex:  1 1 0
    }
    .col-sm-1 {
        --ggs-column: min(1, var(--ggs-columns))
    }
    .col-sm-2 {
        --ggs-column: min(2, var(--ggs-columns))
    }
    .col-sm-3 {
        --ggs-column: min(3, var(--ggs-columns))
    }
    .col-sm-4 {
        --ggs-column: min(4, var(--ggs-columns))
    }
    .col-sm-5 {
        --ggs-column: min(5, var(--ggs-columns))
    }
    .col-sm-6 {
        --ggs-column: min(6, var(--ggs-columns))
    }
    .col-sm-7 {
        --ggs-column: min(7, var(--ggs-columns))
    }
    .col-sm-8 {
        --ggs-column: min(8, var(--ggs-columns))
    }
    .col-sm-9 {
        --ggs-column: min(9, var(--ggs-columns))
    }
    .col-sm-10 {
        --ggs-column: min(10, var(--ggs-columns))
    }
    .col-sm-11 {
        --ggs-column: min(11, var(--ggs-columns))
    }
    .col-sm-12 {
        --ggs-column: min(12, var(--ggs-columns))
    }
    .gap-sm-1 {
        margin-bottom: 1rem;
    }
    .gap-sm-2 {
        margin-bottom: 2rem;
    }
    .gap-sm-3 {
        margin-bottom: 3rem;
    }
}

@media (min-width: 800px) {
    .col-md-auto {
        width: auto;
        flex:  1 1 0
    }
    .col-md-1 {
        --ggs-column: min(1, var(--ggs-columns))
    }
    .col-md-2 {
        --ggs-column: min(2, var(--ggs-columns))
    }
    .col-md-3 {
        --ggs-column: min(3, var(--ggs-columns))
    }
    .col-md-4 {
        --ggs-column: min(4, var(--ggs-columns))
    }
    .col-md-5 {
        --ggs-column: min(5, var(--ggs-columns))
    }
    .col-md-6 {
        --ggs-column: min(6, var(--ggs-columns))
    }
    .col-md-7 {
        --ggs-column: min(7, var(--ggs-columns))
    }
    .col-md-8 {
        --ggs-column: min(8, var(--ggs-columns))
    }
    .col-md-9 {
        --ggs-column: min(9, var(--ggs-columns))
    }
    .col-md-10 {
        --ggs-column: min(10, var(--ggs-columns))
    }
    .col-md-11 {
        --ggs-column: min(11, var(--ggs-columns))
    }
    .col-md-12 {
        --ggs-column: min(12, var(--ggs-columns))
    }

    .gap-md-1 {
        margin-bottom: 1rem;
    }
    .gap-md-2 {
        margin-bottom: 2rem;
    }
    .gap-md-3 {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1100px) {
    .col-lg-auto {
        width: auto;
        flex:  1 1 0
    }
    .col-lg-1 {
        --ggs-column: min(1, var(--ggs-columns))
    }
    .col-lg-2 {
        --ggs-column: min(2, var(--ggs-columns))
    }
    .col-lg-3 {
        --ggs-column: min(3, var(--ggs-columns))
    }
    .col-lg-4 {
        --ggs-column: min(4, var(--ggs-columns))
    }
    .col-lg-5 {
        --ggs-column: min(5, var(--ggs-columns))
    }
    .col-lg-6 {
        --ggs-column: min(6, var(--ggs-columns))
    }
    .col-lg-7 {
        --ggs-column: min(7, var(--ggs-columns))
    }
    .col-lg-8 {
        --ggs-column: min(8, var(--ggs-columns))
    }
    .col-lg-9 {
        --ggs-column: min(9, var(--ggs-columns))
    }
    .col-lg-10 {
        --ggs-column: min(10, var(--ggs-columns))
    }
    .col-lg-11 {
        --ggs-column: min(11, var(--ggs-columns))
    }
    .col-lg-12 {
        --ggs-column: min(12, var(--ggs-columns))
    }

    .gap-lg-1 {
        margin-bottom: 1rem;
    }
    .gap-lg-2 {
        margin-bottom: 2rem;
    }
    .gap-lg-3 {
        margin-bottom: 3rem;
    }
}

@media (min-width: 1600px) {
    .col-xl-auto {
        width: auto;
        flex:  1 1 0
    }
    .col-xl-1 {
        --ggs-column: min(1, var(--ggs-columns))
    }
    .col-xl-2 {
        --ggs-column: min(2, var(--ggs-columns))
    }
    .col-xl-3 {
        --ggs-column: min(3, var(--ggs-columns))
    }
    .col-xl-4 {
        --ggs-column: min(4, var(--ggs-columns))
    }
    .col-xl-5 {
        --ggs-column: min(5, var(--ggs-columns))
    }
    .col-xl-6 {
        --ggs-column: min(6, var(--ggs-columns))
    }
    .col-xl-7 {
        --ggs-column: min(7, var(--ggs-columns))
    }
    .col-xl-8 {
        --ggs-column: min(8, var(--ggs-columns))
    }
    .col-xl-9 {
        --ggs-column: min(9, var(--ggs-columns))
    }
    .col-xl-10 {
        --ggs-column: min(10, var(--ggs-columns))
    }
    .col-xl-11 {
        --ggs-column: min(11, var(--ggs-columns))
    }
    .col-xl-12 {
        --ggs-column: min(12, var(--ggs-columns))
    }

    .gap-xl-1 {
        margin-bottom: 1rem;
    }
    .gap-xl-2 {
        margin-bottom: 2rem;
    }
    .gap-xl-3 {
        margin-bottom: 3rem;
    }
}