*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

:root {
    --gap: 30px;
    --content-width: 1600px;
}

/* --- GRID --- */

.content-box {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 var(--gap);
}
.content-box.shifted {
    margin-left: calc((100vw - var(--content-width)) / 2);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.col-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 (max-width: 480px) {

    /*telefon*/
    :root {
        --gap: 15px;
    }

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

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

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

    .col-10>div,
    .col-11>div,
    .col-12>div {
        width: calc((100% - (3 * var(--gap))) / 4);
        /*designtől függ, lehet 3 oszlop is*/
    }
}

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

    /*tablet*/

    :root {
        --gap: 20px;
    }

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

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

    .col-10>div,
    .col-11>div,
    .col-12>div {
        width: calc((100% - (3 * var(--gap))) / 4);
        /*designtől függ, lehet 3 oszlop is*/
    }
}

@media only screen and (min-width: 769px) and (max-width: 1200px) {
    
    /*fekvő tablet*/

    :root {
        --gap: 25px;
    }

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

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

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

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