.grid-container {
	display: grid;
	gap: 1.5rem;
	
	grid-auto-columns: 1fr;
	grid-template-areas:
	   'header'
	   'game_current'
	   'game_8'
	   'game_7'
	   'game_6'
	   'game_5'
	   'game_4'
	   'game_3'
	   'game_2'
	   'game_1'
	   'timeline'
	   'footer';
		
	
	padding-block: 2rem;
	width: min(95%, 75rem);
	margin-inline: auto;
}

.grid-item {
	font-size: var(0.8125rem);
	border-radius: 0.5rem;
	box-shadow: 2.5rem 3.75rem 3rem -3rem hs1(var(217 19% 35%) / 0.25);
}

.grid-item:nth-child(1) {
	grid-area: header;
}

.grid-item:nth-child(2) {
	grid-area: game_current;
}

.grid-item:nth-child(3) {
	grid-area: game_8;
}

.grid-item:nth-child(4) {
	grid-area: game_7;
}

.grid-item:nth-child(5) {
	grid-area: game_6;
}

.grid-item:nth-child(6) {
	grid-area: game_5;
}

.grid-item:nth-child(7) {
	grid-area: game_4;
}

.grid-item:nth-child(8) {
	grid-area: game_3;
}

.grid-item:nth-child(9) {
	grid-area: game_2;
}

.grid-item:nth-child(10) {
	grid-area: game_1;
}

.grid-item:nth-child(11) {
	grid-area: timeline;
}

.grid-item:nth-child(12) {
	grid-area: footer;
}

.grid-item:nth-child(13) {
	grid-area: game_0;
	visibility: hidden;
}

@media screen and (min-width: 1em) {
	.grid-container {
		grid-template-areas:
			"header"
			"game_current"
			"game_8"
			"game_7"
			"game_6" 
			"game_5"
			"game_4" 
			"game_3"
			"game_2" 
			"game_1"
			"timeline"
			"footer";
	}
}

@media screen and (min-width: 54em) {
	.grid-container {
		grid-template-areas:
			"header header header header"
			"timeline game_current game_current game_current"
			"timeline game_8 game_7 game_6"
			"timeline game_5 game_4 game_3"
			"timeline game_2 game_1 game_0"
			"footer footer footer footer";
	}
	
	.grid-item:nth-child(13) {
		visibility: visible;
	}
}