:root {
    --gap: 40px;
}

.content-box {
    max-width: 1672px;
    margin: 0 auto;
    padding: 0 var(--gap);
}

.offset-left {
    padding-left: calc((100vw - 1622px) / 2);
    padding-right: 3rem;
}

.vertical-center {
    align-items: center;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.column-2 > div {
    width: calc((100% - var(--gap)) / 2);
}

.column-3 > div {
    width: calc((100% - 2 * var(--gap)) / 3);
}

.column-4 > div {
    width: calc((100% - 3 * var(--gap)) / 4);
}

.column-5 > div {
    width: calc((100% - 4 * var(--gap)) / 5);
}

.column-6 > div {
    width: calc((100% - 5 * var(--gap)) / 6);
}

.column-7 > div {
    width: calc((100% - 6 * var(--gap)) / 7);
}

.column-8 > div {
    width: calc((100% - 7 * var(--gap)) / 8);
}

.column-9 > div {
    width: calc((100% - 8 * var(--gap)) / 9);
}

.column-10 > div {
    width: calc((100% - 9 * var(--gap)) / 10);
}

.column-11 > div {
    width: calc((100% - 10 * var(--gap)) / 11);
}

.column-12 > div {
    width: calc((100% - 11 * var(--gap)) / 12);
}

.col-1-2 {
    flex-basis: 50%;
}

.col-1-3 {
    flex-basis: 33.3333%;
}

.col-1-4 {
    flex-basis: 100%;
}

.col-1-5 {
    flex-basis: 20%;
}

.col-1-6 {
    flex-basis: 16.6667%;
}

.col-2-3 {
    flex-basis: 66.6667%;
}

.col-2-5 {
    flex-basis: 40%;
}

.col-3-4 {
    flex-basis: 75%;
}

.col-3-5 {
    flex-basis: 60%;
}

.col-4-5 {
    flex-basis: 80%;
}

.col-5-6 {
    flex-basis: 83.3333%;
}

.row.horizontal-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.col-1-3 {
    flex: 1 1 300px;
    padding: 20px;
}

@media only screen and (max-width: 1200px) {
    :root {
        --gap: 30px;
    }

    .column-3 > div,
    .column-4 > div,
    .column-5 > div {
        width: calc((100% - var(--gap)) / 2);
    }

    .column-6 > div,
    .column-7 > div,
    .column-8 > div {
        width: calc((100% - 2 * var(--gap)) / 3);
    }
}

@media only screen and (max-width: 768px) {
    :root {
        --gap: 15px;
    }

    .column-2 > div,
    .column-3 > div,
    .column-4 > div,
    .column-5 > div,
    .column-6 > div,
    .column-7 > div,
    .column-8 > div,
    .column-9 > div,
    .column-10 > div,
    .column-11 > div,
    .column-12 > div {
        width: 100% !important;
    }

    .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 {
        flex-basis: 100% !important;
    }
}