.row {
    max-width: 100%;
    margin: 0 auto;
}

.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

.row [class^="col-"] {
    float: left;
    min-height: 1px;
}

.row:not(:last-child) {
    margin-bottom: 20px;
}

.row [class^="col-"]:not(:last-child) {
    margin-right: 4%;
}

.row .col-1-of-2 {
    /* width: calc(0.5 * (100% - 20px)); */
    width: 48%;
    
}

.row .col-1-of-3 {
    /*width: calc((100% - 2 * 20px) / 3);*/
    width: 30.66%;
}

.row .col-2-of-3 {
    /* width: calc(2 * ((100% - 2 * 20px) / 3) + 20px); */
    width: 69.33%;
}

.row .col-1-of-4 {
    /* width: calc(0.25 * (100% - 3 * 20px)); */
    width: 22%;
}

.row .col-2-of-4 {
    /* width: calc(2 * ((100% - 3 * 20px) / 4) + 20px); */
    width: 48%;
}

.row .col-3-of-4 {
    /* width: calc(3 * ((100% - 3 * 20px) / 4) + 2 * 20px); */
    width: 74%;
}

.row .col-1-of-5 {
    width: 16%;
}

@media only screen and (max-width: 1200px) {

    .row:not(:last-child) {
        margin-bottom: 0px;
    }

    .row [class^="col-"] {
        float: none;
        margin-bottom: 20px;
        width: 100%;
    }

    .row [class^="col-"]:not(:last-child) {
        margin-right: 0px;
    }

}