Mini sass grid

// nowy sass use math
@use 'sass:math';

.row {
    display: flex;
    flex-wrap: wrap;
}

$columns: 12;

@for $i from 1 through $columns {
    .col-#{$i} {
        // flex: 0 0 100% / $columns * $i;
        // nowy sass
        flex: 0 0 math.div(100%, $columns) * $i;
    }
    .col-offset-#{$i} {
        // margin-left: 100% / $columns * $i;
        // nowy sass
        margin-left: math.div(100%, $columns) * $i;
    }
}

// Responsive Breakpoints
[class^='col-'] {
    // Tablets
    @media (max-width: 768px) {
        flex-basis: 50%;
    }
    // Mobiles
    @media (max-width: 480px) {
        flex-basis: 100%;
    }
}