- var i = 1;
.grid
	while i <= 20
		section(class="random-"+i)= i++

@for $i from 1 through 20 {
	.random-#{$i} {
		background: rgb(random(255), random(255), random(255));
	}
}

body {
	background: black;
	font-family: sans-serif;
}

.grid {
	display: grid;
	grid-gap: .3rem;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

section {
	display: grid;
	place-items: center;
	color: white;
	font-size: 3rem;
	text-shadow: 1px 1px 2px black; 
	padding: 2rem;
}

section:nth-child(4n + 2) {
	color: red;
}

section:nth-child(3n):not(:nth-child(6)) {
	color: yellow;
}