$col: 13;

.start {
    justify-content: flex-start;
}

.center {
    justify-content: center;
}

.end {
    justify-content: flex-end;
}

.v-center {
    align-items: center;
}
.row{
    display:flex;
    flex-direction: row;
}
/*
// ENABLE FOR DEV OR FOR DEMONSTRATION

.col{
    border: 3px solid red;
}
.row{
    border: 3px solid green;
}
*/


    @media screen and (min-width: 600px) {
    @for $i from 1 to $col {

        .s#{$i} {
            width: calc(#{$i} * 8.334%);
        }
    }
    }
    @media screen and (min-width: 600px) and (max-width: 992px) {
        @for $i from 1 to $col {

            .m#{$i} {
                width: calc(#{$i} * 8.334%);
            }
        }
    }
    @media screen and (min-width: 992px) {
        @for $i from 1 to $col {

            .l#{$i} {
                width: calc(#{$i} * 8.334%);
            }
        }
    }