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

:root {
    --gap: 40px;
}


/* grid */
/*EGYFORMA MÉRETŰ OSZLOPOK*/
/*Szülő elemek*/
.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
    display: flex!important;
    gap: var(--gap);
    flex-wrap: wrap!important;
    justify-content: center;
}

/*Gyermek elemek*/
.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);
}

/*VÁLTOZÓ MÉRETŰ OSZLOPOK*/
/*Szülő elemek*/
.row {
    display: flex;
    gap: var(--gap);
}

/*Gyermek elemek*/
/* 1 oszlopos sorok*/
.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);
}

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

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

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

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

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

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


/* Kártya grid */
.card-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-items: center;
    padding: 2rem 0;
}


/*Reszponzív*/

@media only screen and (max-width: 1420px) {
    .column-4>div {
        width: calc((80% - (1 * var(--gap))) / 2);
    }
    .folyamat {
        gap: 40px!important;
    }
    
}
@media only screen and (max-width: 768px) {

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

    .row {
        flex-wrap: wrap;
    }
}



/*Reszponzív - Telefon méret - 480 px alatt*/
@media only screen and (max-width: 769px) {
    :root {
        --gap: 15px!important;
    }

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

    .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: 432px){
    .column-4>div{
        width: 100%;
    }
}

/*Reszponzív - Telefon és tablet közötti méret*/
@media only screen and (min-width: 770px) and (max-width: 1042px) {
    :root {
        --gap: 20px;
    }
    .column-3>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);
    }
}

/*Reszponzív - fekvő tablet nézetik*/
@media only screen and (min-width: 1042px) 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);
    }

    :root {
        --gap: 20px;
    }
}