/* Generic Styles */

* {
	box-sizing: border-box;
}

body {
	padding: 20px 40px;

	font-family: sans-serif;
	background-color: #333;
	color: #dcdcdc;
}

.main-header {
	text-align: center;
}

hr {
	border-color: #dcdcdc;
}

section#output {
	margin: 40px 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
}

article.card {
	flex: 0 1 300px;
	display: flex;
	flex-direction: column;
	align-items: center;

	background: linear-gradient(#627b80, #252e30);
	color: #fff;
	border-radius: 8px;
	box-shadow: 0 0 12px #252e30;
}

article.card figure img {
	border-radius: 50%;
}

article.card .card-content {
	padding: 20px;
	border-top: 1px solid #627b80;
}

article.card .card-content h2 {
	text-align: center;
}

article.card .card-content p {
	font-size: 0.95rem;
}