html,
body {
	min-height: 100%;
}
body {
	margin: 10px;
	background: #024fa2;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(auto, 450px));
	grid-gap: 10px;
	justify-content: center;
	align-content: center;
	min-height: calc(100vh - 20px);
}
.project {
	text-decoration: none;
	background-position: 50% 50%;
	background-size: cover;
	aspect-ratio: 16 / 9;
	max-width: 450px;
	transition: all 200ms;
	display: grid;
	grid-template: 1fr auto / 1fr;
}
.project:focus,
.project:hover {
	filter: contrast(1.25);
}
.project:active {
	filter: contrast(1.5) brightness(1.25);
}
.project-name {
	grid-row: 2;
	color: #fff;
	background: rgba(0 0 0 / 0.75);
	font-family: sans-serif;
	padding: 0.5rem;
}
.project-name > span {
	display: block;
}