:root {
	--neutral: white;
	--all-colors: hsla(302, 24%, 13%, 1.000);
	--all-colors: hsla(8, 65%, 9%, 1.000);
	--absence-of-color: hsla(18, 14%, 90%, 1.000);
	--grey: hsla(307, 3%, 82%, 1.000);
	--primary-red: hsla(6, 71%, 54%, 1.000);
	--primary-blue: hsla(235, 47%, 35%, 1.000);
	--primary-green: hsla(48, 84%, 50%, 1.000);
}

/* 
columns 1727 - gap 28
144 - 590 - 464 - 146 - 268

Rows 1830
34 - 86 - 578 - 200 - 456 - 256 - 50

*/
body {
	height: 100vh;
	width: 100vw;
	background-color: var(--neutral);
	margin: 0;
	padding: 0;
	overflow: hidden;
}
main {
	display: grid;
	grid-template-columns: 144fr 590fr 464fr 146fr 268fr;
	grid-template-rows: 34fr 86fr 578fr 200fr 456fr 256fr 50fr;
	gap: 1.618vmin;
	background-color: var(--all-colors);
	margin: auto;
	background-image: url(img/mondriaan.jpg);
	background-size: contain;
	max-height: 100vh;
	max-width: 100vw;
	height: 100vh;
	aspect-ratio: 100/103;
}
article {
	background-color: var(--absence-of-color);
}
article:first-of-type {
	background-color: var(--primary-red);
	grid-column: span 2;
}
article:nth-of-type(2) {
	grid-column: span 2;
	grid-row: span 4;
	background-color: var(--grey);
}
article:nth-of-type(3) {
	background-color: var(--all-colors);
	grid-row: span 2;
}
article:nth-of-type(4) {
	grid-column: span 2;
	grid-row: span 3;
}
article:nth-of-type(5),
article:nth-of-type(6) {
	background-color: var(--grey);
}
article:nth-of-type(7) {
	grid-row: span 3;
	background-color: var(--grey);
}
article:nth-of-type(8) {
	background-color: var(--primary-blue);
}
article:nth-of-type(9) {
	grid-column: span 2;
	grid-row: span 2;
}
article:nth-of-type(10) {
	grid-row: span 3;
	background-color: var(--primary-green);
	
}
article:nth-of-type(11) {
	background-color: var(--grey);
}
article:nth-of-type(12) {
	grid-column: span 2;
	background-color: var(--grey);
}
article:nth-of-type(13) {
	background-color: var(--all-colors);
}
h2 {
	display: none;
}