* {
	margin: 0;
	padding: 0;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

body {
	background-color: white;
}

main {
	width: 40vw;
	height: 57.3vw;
	background-color: #efeee9;
	margin-left: 30vw;
	margin-top: 1.5em;
}

main:hover {
	background-color: PeachPuff;
}

article {
	float: left;
	width: 87.5%;
	height: 92%;
	margin-top: 6%;
	margin-left: 6.5%;
	background-color: #f8f7f5;
}

article:hover {
	background-color: PapayaWhip;
}

section.null {
	float: left;
	width: 8.3333333%;
	height: 1.8518519%;
}

section.null:hover {
	background-color: hotpink;
}

section.gold {
	float: left;
	width: 8.3333333%;
	height: 1.8518519%;
	background-color: gold;
}

section.gold:hover {
	background-color: DeepSkyBlue;
}

section.red {
	float: left;
	width: 8.3333333%;
	height: 1.8518519%;
	background-color: #d7261e;
}

section.red:hover {
	background-color: DarkMagenta;
}

section.gray {
	float: left;
	width: 8.3333333%;
	height: 1.8518519%;
	background-color: #637285;
}

section.gray:hover {
	background-color: GreenYellow;
}

section.black {
	float: left;
	width: 8.3333333%;
	height: 1.8518519%;
	background-color: black;
}

section.black:hover {
	background-color: SandyBrown;
}

figure.gray {
	float: left;
	width: 100%;
	height: 1.8518519%;
	background-color: #637285;
}

figure.gray:hover {
	background-color: GreenYellow;
}

figure.red {
	float: left;
	width: 100%;
	height: 1.8518519%;
	background-color: #d7261e;
}

figure.red:hover {
	background-color: DarkMagenta;
}

figure.black {
	float: left;
	width: 100%;
	height: 1.8518519%;
	background-color: black;
}

figure.black:hover {
	background-color: SandyBrown;
}

figcaption {
	margin-left: 30vw;
	margin-top: 1em;
	margin-bottom: 1em;
}