:root {
    --gap: 40px;
}

.content-box,
.wide .wp-block-group__inner-container {
    max-width: 1672px;
    margin: 0 auto;
    padding: var(--gap);
}

.offset-left {
    padding-left: max(50px, calc((100vw - 1672px) / 2 + 50px));
    padding-right: 3rem;
}

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

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

.no-gap {
    --gap: 0px;
}

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

.column-2>div {
    width: calc((100% - (1*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: calc((100% - var(--gap))/2);
}

.col-1-3 {
    flex-basis: calc((100% - (2*var(--gap)))/3);
}

.col-1-4 {
    flex-basis: calc((100% - (3*var(--gap)))/4);
}

.col-1-5 {
    flex-basis: calc((100% - (4*var(--gap)))/5);
}

.col-1-6 {
    flex-basis: calc((100% - (5*var(--gap)))/6);
}

.col-2-3 {
    flex-basis: calc(((100% - (2*var(--gap)))/3)*2 + var(--gap));
}

.col-2-5 {
    flex-basis: calc(((100% - (4*var(--gap)))/5)*2 + var(--gap));
}

.col-3-4 {
    flex-basis: calc(((100% - (3*var(--gap)))/4)*3 + (2*var(--gap)));
}

.col-3-5 {
    flex-basis: calc(((100% - (4*var(--gap)))/5)*3 + (2*var(--gap)));
}

.col-4-5 {
    flex-basis: calc(((100% - (4*var(--gap)))/5)*4 + (3*var(--gap)));
}

.col-5-6 {
    flex-basis: calc(((100% - (5*var(--gap)))/6)*5 + (4*var(--gap)));
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {

    .content-box {
        padding: 0 30px;
    }

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

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

@media only screen and (min-width: 480px) and (max-width: 768px) {

    .content-box {
        padding: 0 20px;
    }

    :root {
        --gap: 20px;
    }

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

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

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

}

@media only screen and (max-width: 480px) {

    .content-box {
        padding: 0 15px;
    }

    :root {
        --gap: 10px;
    }

    .column-2>div,
    .column-3>div {
        width: 100%;
    }

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

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

}

@media only screen and (max-width: 768px) {

    .content-box {
        padding: 0 20px;
    }

    .row {
        flex-wrap: wrap;
    }

    .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%;
    }
}