main
	- for (var i=1; i<25; i++)
		.square 
			span= i

aside.context
	.explanation
		| Part of the 
		a(href="https://codepen.io/collection/DQvYpQ" target="_blank") CSS Grid Experiments collection
		| .

footer
	a(href="https://twitter.com/meowlivia_" target="_blank")
		i.icon-social-twitter.icons
	a(href="https://github.com/oliviale" target="_blank")
		i.icon-social-github.icons
	a(href="https://dribbble.com/oliviale" target="_blank")
		i.icon-social-dribbble.icons
View Compiled
:root {
	--red: #b41d1d;
	--red-2: #b41d1d;
	--red-dark-shade: #9b181d;
	--black: #222;
	--green: #024c46;
	--green-2: #507524;
	--green-3: #578521;
	--gold: #bea35c;
	--gold-dark: #ae9145;
	--beige: #f2e7d1;
	--beige-dark-shade: #dfceab;
	--blue-dark: #404148;
	--blue: #5cb9be;
}
body {
	background: #fff;
	font-family: "Castoro", sans-serif;
	padding: 2%;
	background: url("https://assets.codepen.io/567707/background-snowlake.jpg")
		bottom center / cover;
}

* {
	box-sizing: border-box;
}

aside.context {
	text-align: center;
	color: var(--black);
	line-height: 1.7;
	a {
		text-decoration: none;
		color: var(--black);
		padding: 3px 0;
		border-bottom: 1px dashed;
		&:hover {
			border-bottom: 1px solid;
		}
	}
	.explanation {
		max-width: 700px;
		margin: 7em auto 0;
	}
}

footer {
	text-align: center;
	margin: 2em auto 4em;
	width: 100%;
	a {
		text-decoration: none;
		display: inline-block;
		width: 45px;
		height: 45px;
		border-radius: 50%;
		background: transparent;
		border: 1px dashed var(--black);
		color: var(--black);
		margin: 5px;
		&:hover {
			background: rgba(0, 0, 0, 0.1);
		}
		.icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}
	}
}

main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0.01%;
	position: relative;
	padding: 0 2rem;
	margin: 2rem auto 0;
	max-width: 70rem;
	@media (min-width: 40rem) {
		grid-template-columns: repeat(12, 1fr);
		margin-top: 8rem;
		.square {
			&:nth-child(1) {
				grid-column: 6 / 8;
			}
			&:nth-child(2) {
				grid-row: 2;
				grid-column: 5 / 7;
			}
			&:nth-child(3) {
				grid-row: 2;
				grid-column: 7 / 9;
			}
			&:nth-child(4) {
				grid-row: 3;
				grid-column: 4 / 6;
			}
			&:nth-child(5) {
				grid-row: 3;
				grid-column: 6 / 8;
			}
			&:nth-child(6) {
				grid-row: 3;
				grid-column: 8 / 10;
			}
			&:nth-child(7) {
				grid-row: 4;
				grid-column: 3 / 5;
			}
			&:nth-child(8) {
				grid-row: 4;
				grid-column: 5 / 7;
			}
			&:nth-child(9) {
				grid-row: 4;
				grid-column: 7 / 9;
			}
			&:nth-child(10) {
				grid-row: 4;
				grid-column: 9 / 11;
			}
			&:nth-child(11) {
				grid-row: 5;
				grid-column: 2 / 4;
			}
			&:nth-child(12) {
				grid-row: 5;
				grid-column: 4 / 6;
			}
			&:nth-child(13) {
				grid-row: 5;
				grid-column: 6 / 8;
			}
			&:nth-child(14) {
				grid-row: 5;
				grid-column: 8 / 10;
			}
			&:nth-child(15) {
				grid-row: 5;
				grid-column: 10 / 12;
			}
			&:nth-child(16) {
				grid-row: 6;
				grid-column: 1 / 3;
			}
			&:nth-child(17) {
				grid-row: 6;
				grid-column: 3 / 5;
			}
			&:nth-child(18) {
				grid-row: 6;
				grid-column: 5 / 7;
			}
			&:nth-child(19) {
				grid-row: 6;
				grid-column: 7 / 9;
			}
			&:nth-child(20) {
				grid-row: 6;
				grid-column: 9 / 11;
			}
			&:nth-child(21) {
				grid-row: 6;
				grid-column: 11 / 13;
			}
			&:nth-child(22) {
				grid-row: 7;
				grid-column: 4 / 6;
			}
			&:nth-child(23) {
				grid-row: 7;
				grid-column: 6 / 8;
			}
			&:nth-child(24) {
				grid-row: 7;
				grid-column: 8 / 10;
			}
		}
	}
	@media (min-width: 55rem) {
		padding: 0 5rem;
	}
}

.square {
	background: #999;
	width: 100%;
	height: 100%;
	min-width: 4rem;
	border-radius: 3px;
	border: 2px solid var(--black);
	box-shadow: inset -7px 0 9px -7px rgba(0, 0, 0, 0.4),
		inset 0 -7px 9px -7px rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	@media (min-width: 40rem) {
		grid-column: span 2;
	}
	span {
		font-family: Ultra, serif;
		font-size: clamp(0.8rem, 5vw, 1.8rem);
		display: flex;
		background: var(--red);
		color: var(--beige);
		box-shadow: 0 0 0 1px var(--beige), 0 0 0 4px var(--red);
		width: 50%;
		height: 50%;
		border-radius: 100%;
		align-items: center;
		justify-content: center;
		transform: translateY(0.4rem);
		@media (min-width: 40rem) {
			font-size: 1.8rem;
			transform: translateY(0.75rem);
		}
		@media (min-width: 55rem) {
			font-size: clamp(1.2rem, 5.3vw, 2rem);
		}
	}
	&:before {
		content: "";
		display: block;
		padding-bottom: 100%;
	}
	&:after {
		content: "";
		border-radius: 0 0 5rem 5rem;
		width: 40%;
		height: 20%;
		background: linear-gradient(var(--black), #222);
		position: absolute;
		top: 0;
	}
}

.square {
	&:nth-child(2),
	&:nth-child(10),
	&:nth-child(18) {
		background-image: linear-gradient(
				to right,
				rgba(255, 255, 255, 0.4) 1rem,
				rgba(209, 209, 209, 0.3) 1rem
			),
			linear-gradient(to bottom, #ffa4a4 1rem, #c53f3f 1rem);
		background-size: 2rem 2rem;
		background-repeat: repeat;
	}
	&:nth-child(3),
	&:nth-child(11),
	&:nth-child(19) {
		background: var(--green-2);
		background-image: radial-gradient(#fff 15%, transparent 18%),
			radial-gradient(#fff 15%, transparent 18%);
		background-size: 16px 16px;
		background-position: 4px 4px, 12px 12px;
	}
	&:nth-child(5),
	&:nth-child(13),
	&:nth-child(21) {
		background: #fff;
		background-image: linear-gradient(
			to right,
			transparent 30%,
			var(--gold) 30%,
			var(--gold) 45%,
			transparent 45%,
			transparent 55%,
			var(--gold) 55%,
			var(--gold) 62%,
			transparent 62%,
			transparent 70%,
			var(--gold) 70%,
			var(--gold) 78%,
			transparent 78%,
			transparent 85%,
			var(--gold) 85%
		);
		background-size: 26px;
		background-position: 4px;
	}
	&:nth-child(6),
	&:nth-child(14),
	&:nth-child(22) {
		background: var(--blue);
		background-image: repeating-linear-gradient(
			-45deg,
			transparent 50%,
			rgba(255, 255, 255, 0.4) 50%,
			rgba(255, 255, 255, 0) 70%,
			transparent 70%
		);
		background-size: 30% 30%;
		background-position: -40px, -40px;
	}
	&:nth-child(7),
	&:nth-child(15),
	&:nth-child(23) {
		background-color: #8bc34a;
		background-image: repeating-linear-gradient(
				45deg,
				transparent,
				transparent 4px,
				#fff 4px,
				#fff 20px,
				transparent 20px,
				transparent 26px
			),
			repeating-linear-gradient(
				-45deg,
				transparent,
				transparent 4px,
				#fff 4px,
				#fff 20px,
				transparent 20px,
				transparent 26px
			);
		background-size: 100%;
		background-position: 0;
	}

	&:nth-child(8n) {
		background: var(--red);
		background-image: linear-gradient(
				to bottom,
				transparent 55%,
				rgba(0, 0, 0, 0.1) 60%,
				var(--gold) 60%,
				var(--gold-dark) 80%,
				rgba(0, 0, 0, 0.1) 80%,
				transparent 85%
			),
			linear-gradient(
				to right,
				transparent 20%,
				rgba(0, 0, 0, 0.1) 25%,
				var(--gold) 25%,
				var(--gold-dark) 45%,
				rgba(0, 0, 0, 0.1) 45%,
				transparent 50%
			);
		background-size: 100%;
		background-position: 0;
	}
	&:nth-child(16) {
		background: var(--blue-dark);
		background-image: linear-gradient(
				to bottom,
				transparent 55%,
				rgba(0, 0, 0, 0.1) 60%,
				var(--beige) 60%,
				var(--beige-dark-shade) 80%,
				rgba(0, 0, 0, 0.1) 80%,
				transparent 85%
			),
			linear-gradient(
				to right,
				transparent 20%,
				rgba(0, 0, 0, 0.1) 25%,
				var(--beige) 25%,
				var(--beige-dark-shade) 45%,
				rgba(0, 0, 0, 0.1) 45%,
				transparent 50%
			);
		background-size: 100%;
		background-position: 0;
	}
	&:nth-child(10),
	&:nth-child(23) {
		background-color: var(--green);
		background-image: repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 5px,
			white 5px,
			white 12px,
			transparent 12px,
			transparent 19px
		);
		background-size: 100%;
		background-position: 0;
	}
	&:nth-child(1),
	&:nth-child(9),
	&:nth-child(17) {
		background: url(https://assets.codepen.io/567707/background-xmas-pattern.jpg)
			10% center / 200% 200%;
	}
	&:nth-child(4),
	&:nth-child(12),
	&:nth-child(20) {
		background: url(https://assets.codepen.io/567707/background-xmas-pattern-2.jpg)
			center center / cover;
	}
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js