body {
	margin: 0;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	font: 150%/1.999 "Fedra Serif B 4", georgia, serif;
	text-rendering: optimizeLegibility;
		-webkit-font-feature-settings: "kern" 1, "liga" on, "dlig" on;
	   	   -moz-font-feature-settings: "kern" 1, "liga" on, "dlig" on;
	            font-feature-settings: "kern" 1, "liga" on, "dlig" on;
		-webkit-text-size-adjust: 100%;
}
img {
	display: block;
	width: 100%;
	align-self: flex-start;
}
article {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	background: black;
}
article a {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	color: black;
	text-decoration: none;
	min-height: 5em;
	transition: opacity .3s;
	position: relative;
	margin: 0 0 1em;
}
article a:only-child {
	flex-grow: 1;
}
article a:first-of-type:hover,
article a:first-of-type:focus {
	opacity: .8;
}
a:focus {
	outline: 1px dotted red;
}
article a + a {
	display: block;
	bottom: 0;
	height: auto;
	box-sizing: border-box;
	line-height: 1.414;
	min-height: 0;
	background: hsla(50,100%,70%,.99);
	padding: .414em;
	color: black;
	transition: background .3s;
	flex-grow: 1;
	margin: -1em 0 0;
}
article:nth-last-of-type(-n + 2) a {
	margin: 0;
}
article a + a::first-letter {
	text-transform: uppercase;
}
article a + a:hover,
article a + a:focus {
	background: hsla(0,0%,0%,.0) !important;
	color: white;
}
@media (min-width: 321px) {
	body {
		padding: 0;
	}
	article {
		width: 50%;
	}
}
@media (min-width: 600px) {
	article {
		width: 33.3333%;
	}
}
@media (min-width: 900px) {
	article {
		width: 25%;
	}
}
@media (min-width: 1200px) {
	article {
		width: 20%;
	}
}
@media (min-width: 1500px) {
	article {
		width: 16.666666667%;
	}
}
@media (min-width: 1800px) {
	article {
		width: 14.285714286%;
	}
}
@media (min-width: 2100px) {
	article {
		width: 12.5%;
	}
}
@media (min-width: 2400px) {
	article {
		width: 300px;
	}
}