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


.row div[class*=col] {
    /*osztály tartalmazza a következőt: "col"*/
    margin-left: 20px;
    margin-right: 20px;
}

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

.col-1-3 {
    width: calc(33.3333333333% - 40px)
}

.col-1-4 {
    width: calc(25% - 40px)
}

.col-1-5 {
    width: calc(20% - 40px)
}

.col-1-6 {
    width: calc(16.6666666667% - 40px)
}

.col-2-3 {
    width: calc(66.6666666667% - 40px)
}

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

.col-3-4 {
    width: calc(75% - 40px)
}

.col-3-5 {
    width: calc(60% - 40px)
}

.col-4-5 {
    width: calc(80% - 40px)
}

.col-5-6 {
    width: calc(83.3333333333% - 40px)
}

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

.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -14px;
    margin-right: -14px;
}


.column-2 > div,
.column-3 > div,
.column-4 > div,
.column-5 > div,
.column-6 > div,
.column-7 > div,
.column-8 > div,
.column-9 > div {

    margin-left: 14px;
    margin-right: 14px;
}



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

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

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

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

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

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

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

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


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

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

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

    .column-5 > div,
    .column-6 > div {
        width: calc(25% - 40px)
    }

    .column-7 > div {
        width: calc(20% - 40px)
    }

    .column-8 > div {
        width: calc(16.6666666667% - 40px)
    }

    .column-9 > div {
        width: calc(14.2857142857% - 40px)
    }

}





@media screen and (min-width:480px) and (max-width: 767px) {
    .column-2 > div {
        width: calc(100% - 40px)
    }

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

    .column-5 > div,
    .column-6 > div {
        width: calc(33.3333333333% - 40px)
    }

    .column-7 > div,
    .column-8 > div {
        width: calc(25% - 40px)
    }

    .column-9 > div {
        width: calc(20% - 40px)
    }
}


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

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

    .column-5 > div,
    .column-6 > div,
    .column-7 > div,
    .column-8 > div {
        width: calc(50% - 40px)
    }

    .column-9 > div {
        width: calc(33.3333333333% - 40px)
    }

}

.card div[class*=col] {
    background: #fff;
    padding: 20px;
    box-shadow: 0 1px 4px rgba (0, 0, 0, 0.2);
    border-radius: 4px;
    margin-bottom: 40px;

}