<div id=design>

	<img src=photo-1511692277506-3be3a7ab1686>

	<div id=rotatedBorder></div>

	<div class=grid><div data-white></div><div></div><div></div><div data-white></div></div>

	<div id=blend>
		<img src=photo-1511692277506-3be3a7ab1686>
		<div class=grid><div></div><div data-white></div><div data-white></div><div></div></div>
	</div>

</div>

#design {
	position: relative; width: 300px; height: 300px;
	margin: auto; margin-top: 100px;	
}

#design > *, #blend > * { position: absolute; height: 100%; width: 100%; }

#rotatedBorder {
	box-sizing: border-box; border: 15px #eb311f solid;
	transform: rotate(45deg);
	box-shadow: 0 0 10px #eb311f, inset 0 0 20px #eb311f;
}

.grid { display: grid; grid: repeat(2, 1fr) / repeat(2, 1fr); }

[data-white]{ background-color: white; }

#blend { mix-blend-mode: multiply; }

img { object-fit: cover; }

#design > img{box-shadow: 0 0 20px #bac3c3; }