.row, .column {
    box-sizing: border-box;
}

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

    &::after {
        clear: both;
    }
}

.column {
    float: left;
    display: block;
    position: relative;
}

.column-1,
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
    float: none;
    width: auto;
}

.column + .column {
    margin-left: 0;
}

@media only screen and (min-width: 768px) {
    .column-1,
    .column-2,
    .column-3,
    .column-4,
    .column-5,
    .column-6,
    .column-7,
    .column-8,
    .column-9,
    .column-10,
    .column-11,
    .column-12 {
        float: left;
    }

    .column + .column {
        margin-left: 1.6%;
    }
    .column-1 {
        width: 6.86666666667%;
    }
    .column-2 {
        width: 15.3333333333%;
    }
    .column-3 {
        width: 23.8%;
    }
    .column-4 {
        width: 32.2666666667%;
    }
    .column-5 {
        width: 40.7333333333%;
    }
    .column-6 {
        width: 49.2%;
    }
    .column-7 {
        width: 57.6666666667%;
    }
    .column-8 {
        width: 66.1333333333%;
    }
    .column-9 {
        width: 74.6%;
    }
    .column-10 {
        width: 83.0666666667%;
    }
    .column-11 {
        width: 91.5333333333%;
    }
    .column-12 {
        width: 100%;
        margin-left: 0;
    }
}