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

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

.col-1-2 {
    width: calc(50% - 32px)
}
.col-1-3 {
    width: calc(33.33333333% - 32px)
}
.col-1-4 {
    width: calc(25% - 32px)
}
.col-1-5 {
    width: calc(20% - 32px)
}
.col-1-6 {
    width: calc(16.66666667% - 32px)
}
.col-2-3 {
    width: calc(66.66666667% - 32px)
}
.col-2-5 {
    width: calc(40% - 32px)
}
.col-3-4 {
    width: calc(75% - 32px)
}
.col-3-5 {
    width: calc(60% - 32px)
}
.col-4-5 {
    width: calc(80% - 32px)
}
.col-5-6 {
    width: calc(83.33333333% - 32px)
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
 	.col-1-3,.col-1-4,
.col-1-5,
.col-1-6,
.col-2-3,
.col-2-5,

.col-3-5,
.col-4-5,
.col-5-6 { width: calc(50% - 32px)
		
	}
	.col-1-2,.col-3-4 {
    width: calc(100% - 32px)
}
}

@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% - 32px)
}
}


.column-2, .column-3, .column-4, .column-5, .column-6, .column-7, .column-8, .column-9 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -16px;
    margin-right: -16px;
}
.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: 16px;
    margin-right: 16px;
}
.column-2 > div {
    width: calc(50% - 32px);
}
.column-3 > div {
    width: calc(33.33333333% - 32px);
}
.column-4 > div {
    width: calc(25% - 32px);
}
.column-5 > div {
    width: calc(20% - 32px);
}
.column-6 > div {
    width: calc(16.66666667% - 32px);
}
.column-7 > div {
    width: calc(14.28571429% - 32px);
}
.column-8 > div {
    width: calc(12.5% - 32px);
}
.column-9 > div {
    width: calc(11.11111111% - 32px);
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .column-2 > div {
        width: calc(100% - 32px)
    }
    .column-3 > div, .column-4 > div {
        width: calc(33.33333333% - 32px)
    }
    .column-5 > div, .column-6 > div {
        width: calc(25% - 32px)
    }
    .column-7 > div {
        width: calc(20% - 32px)
    }
    .column-8 > div {
        width: calc(16.66666667% - 32px)
    }
    .column-9 > div {
        width: calc(14.28571429% - 32px)
    }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    .column-2 > div {
        width: calc(100% - 32px)
    }
    .column-3 > div, .column-4 > div {
        width: calc(50% - 32px)
    }
    .column-5 > div, .column-6 > div {
        width: calc(33.33333333% - 32px)
    }
    .column-7 > div, .column-8 > div {
        width: calc(25% - 32px)
    }
    .column-9 > div {
        width: calc(20% - 32px)
    }
}
@media screen and (max-width: 479px) {
    .column-2 > div, .column-3 > div, .column-4 > div {
        width: calc(100% - 32px)
    }
    .column-5 > div, .column-6 > div, .column-7 > div, .column-8 > div {
        width: calc(50% - 32px)
    }
    .column-9 > div {
        width: calc(50% - 32px)
    }
}