.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.row div[class*=col-] {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

.col-1-2 {
    width: calc(50% - 1.5rem)
}

.col-1-3 {
    width: calc(33.33333333% - 1.5rem)
}

.col-1-4 {
    width: calc(25% - 1.5rem)
}

.col-1-5 {
    width: calc(20% - 1.5rem)
}

.col-1-6 {
    width: calc(16.66666667% - 1.5rem)
}

.col-2-3 {
    width: calc(66.66666667% - 1.5rem)
}

.col-2-5 {
    width: calc(40% - 1.5rem)
}

.col-3-4 {
    width: calc(75% - 1.5rem)
}

.col-3-5 {
    width: calc(60% - 1.5rem)
}

.col-4-5 {
    width: calc(80% - 1.5rem)
}

.col-5-6 {
    width: calc(83.33333333% - 1.5rem)
}

@media screen and (max-width: 768px) {
    .col-1-2,
    .col-1-3,
    .col-1-4,
    .col-1-5,
    .col-1-6,
    .col-2-3,
    .col-2-5,
    .col-3-4,
    .col-3-5,
    .col-4-5,
    .col-5-6 {
        width: calc(100% - 1.5rem)
    }
}