.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -15px;
    margin-right: -15px;
}

    .row.row-align-top {
        align-items: flex-start;
    }

    .row > .col {
        padding: 15px;
    }

        .row > .col.col-1 {
            width: 8.333333333%;
        }

        .row > .col.col-2 {
            width: 16.66666666%;
        }

        .row > .col.col-3 {
            width: 25%;
        }

        .row > .col.col-4 {
            width: 33.33333333%;
        }

        .row > .col.col-5 {
            width: 41.66666666%;
        }

        .row > .col.col-6 {
            width: 50%;
        }

        .row > .col.col-7 {
            width: 58.33333333%;
        }

        .row > .col.col-8 {
            width: 66.66666666%;
        }

        .row > .col.col-9 {
            width: 75%;
        }

        .row > .col.col-10 {
            width: 83.33333333%;
        }

        .row > .col.col-11 {
            width: 91.66666666%;
        }

        .row > .col.col-12 {
            width: 100%;
        }


@media screen and (max-width: 768px) {
    .row > .col {
        width: 100% !important;
    }
}