:root {
    /*root = gyökér*/
    --gap: 40px;
}

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

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

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

    .offset-left {
        padding-left: 40px;
        padding-right: 40px;
    }
}
    .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%/2);
    }

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

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

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

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

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

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

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

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

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

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

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

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

    /*RESZPONZÍV GRID*/
    @media only screen and (min-width: 480px) and (max-width: 768px) {

        :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) {

        :root {
            --gap: 15px;
        }

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