* {
	box-sizing: border-box;
}

body {
	background-color: #23262d;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	max-width: 400px;
	height: 400px;
	gap: 20px;
	margin: 80px auto;
	animation: resize 3000ms ease infinite both;
}

.item {
	--color2: 36;
	--color2: 76;
	--delay: 0ms;
	background-color: hsl(var(--color1), 100%, 60%);
	animation: colorChange 3000ms ease var(--delay) infinite both;
	
	&:nth-child(4n - 2) {
		--delay: 1000ms;
	}
	
	&:nth-child(4n) {
		--delay: 2000ms;
	}
}

@keyframes colorChange {
	0% {
		background-color: hsl(36, 100%, 64%);
	}
	
	25% {
		background-color: hsl(76, 100%, 64%);
	}
		
	50% {
		background-color: hsl(206, 100%, 64%);
	}
	
	75% {
		background-color: hsl(305, 100%, 64%);
	}
	
	100% {
		background-color: hsl(36, 100%, 64%);
	}
}

@keyframes resize {
	0% {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
	
	25% {
		grid-template-columns: 1fr 2fr 3fr;
		grid-template-rows: 1fr 2fr 3fr;
	}
	
	50% {
		grid-template-columns: 1fr 5fr 1fr;
		grid-template-rows: 1fr 5fr 1fr;
	}
	
	75% {
		grid-template-columns: 3fr 2fr 1fr;
		grid-template-rows: 3fr 2fr 1fr;
	}
	
	100% {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
}