*,
*:before,
*:after {
box-sizing: border-box;
}
:root {
--gap: 40px;
}   .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;
} .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);
}  .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);
}
.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);
} .card-grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
justify-items: center;
padding: 2rem 0;
} @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%;
min-width: 0;
}
.row {
flex-wrap: wrap;
}
} @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%;
}
} @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);
}
} @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;
}
}