// Grid style
.row {
    display: flex;
    flex-wrap: wrap;
}

.col {
    flex: 1 0 0;
}

@for $i from 1 through 12 {
    .col-#{$i} {
        flex: 0 0 auto;
        width: calc($i / 12) * 100%;
    }
}

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0;
    }
    @for $i from 1 through 12 {
        .col-sm-#{$i} {
            flex: 0 0 auto;
            width: calc($i / 12) * 100%;
        }
    }
}

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0;
    }
    @for $i from 1 through 12 {
        .col-md-#{$i} {
            flex: 0 0 auto;
            width: calc($i / 12) * 100%;
        }
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0;
    }
    @for $i from 1 through 12 {
        .col-lg-#{$i} {
            flex: 0 0 auto;
            width: calc($i / 12) * 100%;
        }
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0;
    }
    @for $i from 1 through 12 {
        .col-xl-#{$i} {
            flex: 0 0 auto;
            width: calc($i / 12) * 100%;
        }
    }
}
@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0;
    }
    @for $i from 1 through 12 {
        .col-xxl-#{$i} {
            flex: 0 0 auto;
            width: calc($i / 12) * 100%;
        }
    }
}