.grid-wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 1024px) {
	/* .grid-wrapper {
		flex-direction: row;
		flex-wrap: wrap;
	} */

	.grid-wrapper {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 10px;
		grid-auto-rows: minmax(100px, auto);
	}
}

.grid-wrapper > div {
	-webkit-box-shadow: 0 2px 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3);
    box-shadow: 0 2px 1px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3);
	border-radius: 5px;
	background-color: rgba(158, 158, 158,.5);
	padding: 1em;
}

.grid-wrapper > div.bg-blue {
	background-color: rgba(42, 80, 154);
	color: #ffffff;
}

.grid-wrapper ul {
	padding-left: 30px
}

.grid-block {
	grid-column: 1;
	grid-row: 1;
}

.grid-block-row-2, .grid-block-col-2 {
	grid-row: 2;
}

.grid-block-row-3, .grid-block-col-3 {
	grid-row: 3;
}

.grid-block-row-4, .grid-block-col-4 {
	grid-row: 4;
}

.grid-block-row-5, .grid-block-col-5 {
	grid-row: 5;
}

.grid-block-row-6, .grid-block-col-6 {
	grid-row: 6;
}

.grid-block-row-7, .grid-block-col-7 {
	grid-row: 7;
}

.grid-block-row-8, .grid-block-col-8 {
	grid-row: 8;
}

.grid-block-row-9, .grid-block-col-9 {
	grid-row: 9;
}

.grid-block-row-10, .grid-block-col-10 {
	grid-row: 10;
}

.grid-block-row-11, .grid-block-col-11 {
	grid-row: 11;
}

.grid-block-row-12, .grid-block-col-12 {
	grid-row: 12;
}

.grid-block-row-2 {
	grid-row: 2 !important;
}

.grid-block-row-3 {
	grid-row: 3 !important;
}

.grid-block-row-4 {
	grid-row: 4 !important;
}

.grid-block-row-5 {
	grid-row: 5 !important;
}

@media screen and (max-width: 1023px) {
	.grid-wrapper-col-3 .grid-block-row-2 {
		grid-row: 4 !important;
	}
	
	.grid-wrapper-col-3 .grid-block-row-2.grid-block-col-2, .grid-wrapper-col-4 .grid-block-row-2 {
		grid-row: 5 !important;
	}
	
	.grid-wrapper-col-3 .grid-block-row-2.grid-block-col-3, .grid-wrapper-col-4 .grid-block-row-2.grid-block-col-2 {
		grid-row: 6 !important;
	}
	
	.grid-wrapper-col-4 .grid-block-row-2.grid-block-col-3 {
		grid-row: 7 !important;
	}
	
	.grid-wrapper-col-4 .grid-block-row-2.grid-block-col-4 {
		grid-row: 8 !important;
	}
}

@media screen and (min-width: 1024px) {
	.grid-wrapper-col-2 {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.grid-wrapper-col-3 {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.grid-wrapper-col-4 {
		grid-template-columns: repeat(4, 1fr);
	}
	
	.grid-wrapper-col-5 {
		grid-template-columns: repeat(5, 1fr);
	}
	
	.grid-wrapper-col-6 {
		grid-template-columns: repeat(6, 1fr);
	}
	
	.grid-wrapper-col-7 {
		grid-template-columns: repeat(7, 1fr);
	}
	
	.grid-wrapper-col-8 {
		grid-template-columns: repeat(8, 1fr);
	}
	
	.grid-wrapper-col-9 {
		grid-template-columns: repeat(9, 1fr);
	}
	
	.grid-wrapper-col-10 {
		grid-template-columns: repeat(10, 1fr);
	}
	
	.grid-wrapper-col-11 {
		grid-template-columns: repeat(11, 1fr);
	}
	
	.grid-wrapper-col-12 {
		grid-template-columns: repeat(12, 1fr);
	}

	.grid-block-col-2, .grid-block-col-3, .grid-block-col-4, .grid-block-col-5, .grid-block-col-6, .grid-block-col-7, .grid-block-col-8, .grid-block-col-9, .grid-block-col-10, .grid-block-col-11, .grid-block-col-12 {
		grid-row: 1;
	}

	.grid-block-col-2 {
		grid-column: 2;
	}
	
	.grid-block-col-3 {
		grid-column: 3;
	}
	
	.grid-block-col-4 {
		grid-column: 4;
	}
	
	.grid-block-col-5 {
		grid-column: 5;
	}
	
	.grid-block-col-6 {
		grid-column: 6;
	}
	
	.grid-block-col-7 {
		grid-column: 7;
	}
	
	.grid-block-col-8 {
		grid-column: 8;
	}
	
	.grid-block-col-9 {
		grid-column: 9;
	}
	
	.grid-block-col-10 {
		grid-column: 10;
	}
	
	.grid-block-col-11 {
		grid-column: 11;
	}
	
	.grid-block-col-12 {
		grid-column: 12;
	}
}