.column-3,
.column-4 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}


.column-3 > div,
.column-4 > div {
    margin-left: 20px;
    margin-right: 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}

.row div[class*=col] {
    /*osztály tartalmazza a col szócskát*/
    margin-left: 20px;
    margin-right: 20px;
}

.column-3 > div {
    width: calc(33.3% - 40px);
}

.column-4 > div {
    width: calc(25% - 40px);
}


@media only screen and (min-width: 1025px) and (max-width:1170px) {
    .column-4 > div {
        width: calc(50% - 40px)
    }
}

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

    .column-3 > div,
    .column-4 > div {
        width: calc(50% - 40px)
    }
}

@media only screen and (min-width: 480px) and (max-width:767px) {
    
    .column-3 > div,
    .column-4 > div {
        width: calc(50% - 40px)
    }
}

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

    .column-3 > div,
    .column-4 > div {
        width: calc(100% - 40px)
    }

}

.col-1-2 {
    width: calc(50% - 40px)
}


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

    .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 {
        width: calc(100% - 40px)
    }
}