/* A * jel az úgynevezett univerzális kijelölő, amit ebbe a definícióba írsz, minden elemre érvényes lesz.
   Ezt a definíciót ezentúl minden stíluslapod elejére írd be! */
*,
*:before,
*:after {
	box-sizing: border-box;
}
body {
	margin: 0; 
	padding: 0;
}

img {
	max-width: 100%;
}

:root {
	--gap: 30px;
}


/* grid */

.content-box {
	max-width: 1450px;
	margin: 0 auto;
	padding: 0 20px;
}

.row {
	display: flex; 
	gap: var(--gap);
}

.column-2,
.column-3,
.column-4,
.column-5,
.column-6,
.column-7,
.column-8,
.column-9,
.column-10,
.column-11,
.column-12 {
	display: flex; 
	flex-wrap: wrap;
	gap: var(--gap);
	
}

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

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

@media only screen and (min-width: 769px) 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);
	}
}

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

	:root {
		--gap: 20px;
	}
	
.column-3 > div, 
.column-4 > 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 (max-width: 480px) {
	
	:root {
		--gap: 15px;
	}

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

.column-4 > div,
.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: 768px) {

.row {
	flex-wrap: wrap;
	}
.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%;
	}
}