.grid {
	--h1: ;
	--h2: ;
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	grid-template-rows: repeat(9, 1fr);
	grid-gap: 10px;
	padding: 20px;
	background: 
		linear-gradient(60deg, 
		hsl(var(--h1), 100%, 50%), 	
		hsl(var(--h2), 50%, 40%));
}

.grid__item {
	grid-column: 
		var(--colStart, 1) / span var(--span, 3);
	grid-row:
		var(--rowStart, 1) / span var(--span, 3);
	border: 4px solid rgba(black, 0.5);
	mix-blend-mode: soft-light;
}

.grid__item:nth-child(even) {
	filter: blur(var(--blur, 0px));
}

.grid__item:nth-child(1) {
	--colStart: 16;
	--rowStart: 3;
	--span: 1;
	--blur: 2;
}

 .grid__item:nth-child(2) {
	--colStart: 7;
	--rowStart: 3;
	--span: 3;
	--blur: 2;
}

 .grid__item:nth-child(3) {
	--colStart: 2;
	--rowStart: 1;
	--span: 6;
	--blur: 3;
}

 .grid__item:nth-child(4) {
	--colStart: 12;
	--rowStart: 4;
	--span: 4;
	--blur: 9;
}

 .grid__item:nth-child(5) {
	--colStart: 11;
	--rowStart: 4;
	--span: 6;
	--blur: 5;
}

 .grid__item:nth-child(6) {
	--colStart: 7;
	--rowStart: 7;
	--span: 3;
	--blur: 3;
}

 .grid__item:nth-child(7) {
	--colStart: 13;
	--rowStart: 5;
	--span: 4;
	--blur: 3;
}