:root {
    --gap: 40px;
    --padding-small: 20px;
    --padding-large: 100px;
}

.content-box {
    max-width: 1672px;
    /* 96px x 12 + 40px x 11 + 40px x 2 = 1152 + 440 + 80 = 1672px */
    margin: 0 auto;
    padding: 0 var(--padding-large) var(--padding-small) var(--padding-large);
}

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

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

/*GRID - EGYENLŐ SZÉLES OSZLOPOK*/

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

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

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

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

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

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

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

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

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

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

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

/*GRID - KÜLÖNBÖZŐ SZÉLES OSZLOPOK*/

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

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

/*2/4 = 1/2*/

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

/*2/6 = 1/3*/

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

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

/*3/6 = 1/2*/

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

/*4/6 = 2/3*/

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

/*@media only screen and (max-width: 1672px) {
    .offset-left {
        padding-left: 40px;
        padding-right: 40px;
    }*/
}

/*---egyforma szélességű oszlopok---*/
/*---TABLET - FEKVŐ---*/

@media only screen and (min-width: 769px) and (max-width:1280px) {
    :root {
        --gap: 12px;
    }

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

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

/*---TABLET - ÁLLÓ---*/
@media only screen and (min-width: 481px) and (max-width:768px) {

    :root {
        --gap: 12px;
    }

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

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

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

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

    :root {
        --gap: 4px;
    }

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

    .column-5 > div,
    .column-6 > div,
    .column-5 > article,
    .column-6 > article {
        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,
    .column-7 > article,
    .column-8 > article,
    .column-9 > article,
    .column-10 > article,
    .column-11 > article,
    .column-12 > article {
        width: calc((100% - (2*var(--gap)))/3);
    }
}

/*---különböző szélességű oszlopok kis kijelzőn---*/
@media only screen and (max-width: 768px) {
    .content-box {
        padding: 0 var(--padding-small);
    }

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