.row{
    margin-left:-0.5rem;
    margin-right:-0.5rem;
    margin-bottom:1rem;
    &.row-flex{
        flex-wrap:wrap;
    }
    &::after{
        display:block;
        content:"";
        clear:both;
    }
    .col {
        float:left;
        width:100%;
        padding-left:0.5rem;
        padding-right:0.5rem;
        box-sizing:border-box;
    }
}

@media screen and (max-width:599px){
    .row .col {
        &.s12{width:100%;}
        &.s9{width:75%;}
        &.s6{width:50%;}
        &.s3{width:25%;}
    }
}

@media screen and (max-width:500px){
    .row .col {
        &.xs12{width:100%;}
        &.xs9{width:75%;}
        &.xs6{width:50%;}
        &.xs3{width:25%;}
    }
}

@media screen and (min-width:600px){
    .row .col {
        &.m12{width:100%;}
        &.m9{width:75%;}
        &.m6{width:50%;}
        &.m3{width:25%;}
    }
}

@media screen and (min-width:993px){
    .row .col{
        &.l12{width:100%;}
        &.l9{width:75%;}
        &.l8{width:66.66666666667%;}
        &.l7{width:58.3333333333%;}
        &.l6{width:50%;}
        &.l5{width:41.6666666667%;}
        &.l4{width:33.3333333333%;}
        &.l3{width:25%;}
        &.l2{width:16.66666666667%;}
        &.push-l4{left:33.33333333%;}
        &.push-l5{left:41.6666666667%;}
        &.pull-l7{right:66.6666666667%;}
        &.pull-l8{right:58.3333333333%;}
    }
}


@media screen and (min-width:1201px){
    .row .col{
        &.xl12{width:100%;}
        &.xl9{width:75%;}
        &.xl8{width:66.66666666667%;}
        &.xl7{width:58.3333333333%;}
        &.xl6{width:50%;}
        &.xl5{width:41.6666666667%;}
        &.xl4{width:33.3333333333%;}
        &.xl3{width:25%;}
    }
}