* {
    box-sizing: border-box;
}

.row {
    max-width: 1100px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    margin: 0 auto;
}

/* Clearfix */

.row::before,
.row::after {
    display: table;
    content: '';
}

.row::after {
    clear: both;
}

.col-3,
.col-4,
.col-6,
.col-12 {
    float: left;
    padding-left: 1.04166666%;
    padding-right: 1.04166666%;
}

/* Mobile defaults */

.col-3,
.col-4,
.col-6,
.col-12 {
    width: 100%;
}

@media only screen and (min-width: 640px) {
    .col-3,
    .col-4,
    .col-6,
    .col-12 {
        width: 100%;
    }
}


/* Non-mobile, grid */

@media only screen and (min-width: 760px) {
    /* 3 columns, 3/12 in % */
    .col-3 {
        width: 32%;
    }

    /* 4 columns */
    .col-4 {
        width: 25%;
    }

    /* 6 columns */
    .col-6 {
        width: 50%;

    }

    /* 12 columns */
    .col-12 {
        width: 100%;
    }
}