.container {
    margin: 0 auto;
    max-width: 1200px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.column {
    text-align: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1;
    margin: 10px;
    padding: 10px;
}

.col-1 {
    max-width: calc(100% / 12 - 40px);
}
.col-2 {
    max-width: calc(100% / 12 * 2 - 40px);
}
.col-3 {
    max-width: calc(100% / 12 * 3 - 40px);
}
.col-4 {
    max-width: calc(100% / 12 * 4 - 40px);
}
.col-5 {
    max-width: calc(100% / 12 * 5 - 40px);
}
.col-6 {
    max-width: calc(100% / 2 - 40px);
}
.col-9 {
    max-width: calc(100% / 12 * 9 - 40px);
}

@media (max-width: 768px) {
    .column {
        text-align: left;
    }
    .col-2 {
        max-width: 50%;
    }
    .col-6 {
        max-width: 100%;
    }
}


.offset-1 {
    margin-left: calc(100% / 12);
}
.offset-2 {
    margin-left: calc(100% / 12 * 2);
}
.offset-3 {
    margin-left: calc(100% / 12 * 3);
}
.offset-4 {
    margin-left: calc(100% / 12 * 4);
}
.offset-5 {
    margin-left: calc(100% / 12 * 5);
}
.offset-6 {
    margin-left: calc(100% / 2);
}
.offset-9 {
    margin-left: calc(100% / 12 * 9);
}


@media (max-width: 768px) {
    .offset-3, .offset-6 {
        margin-left: 0;
    }
    .offset-5 {
        margin-left: calc(100% / 5);
    }
}