/*GRID RENDSZER KIALAKÍTÁSA*/
:root{
    --gap: 40px;
}
.content-box,
.wide .wp-block-group__inner-container{
    /* max-width: 1622px;*/
    max-width: 1672px;
    margin: 0 auto;
    padding: 0 40px;
}
.row{
    display: flex;
    gap: var(--gap);
}
.no-gap{
    --gap:0px;
}
.offset-left{
    padding-left: calc((100vw - 1422px)/2);
    padding-right: 3rem;
}
@media only screen and (max-width: 1462px) {
    .offset-left{
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media only screen and (max-width: 768px){
    .offset-left{
        padding-left: 20px;
        padding-right: 20px;
    }
}

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

.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%/5 * 6);
}

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

    :root{
        --gap: 20px;
    }

    .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 (min-width: 480px) and (max-width: 768px){
    :root{
        --gap: 15px;
    }
    .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 (min-width: 769px) and (max-width: 1200px){
    :root{
        --gap: 15px;
    }
    .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 (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%;
    }
}