@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

body {
	margin: 0px;
	font-family: 'Roboto', sans-serif;
}

header {
	padding: 10px 10%;
	text-align: center;
	background-color: black;
	color: white;
}

table {
	border-collapse: collapse;
	margin: auto;
}

tr {
	border-bottom: 1px solid rgb(179, 179, 179);
}

th,
td {
	padding: 10px 20px;
	vertical-align: top;
}

header a{
	color: white;
	text-decoration: none;
	padding: 7px;
}

a {
	color: black;
}

img {
	width: 100%;
}

section {
	display: grid;
	padding: 50px 10%;
}

.alternate {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

.alternate article {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-rows: min-content max-content;
	align-items: stretch;
	justify-content: stretch;
	overflow: hidden;
}

.alternate article figure,
.alternate article img {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
}

.alternate article figure {
	background-color: rgba(255, 255, 255, 0.6);
	padding: 18px 15px 5px 15px;
	margin: 0px;
	z-index: 2;
	transition: 1s;
	align-self: flex-end;
	transform: translateY(calc(100% - 55px));
}

.alternate article figure h2 {
	font-size: 20px;
	margin: 0px 0px 15px 0px;
}

.alternate article:hover figure {
	transform: translateY(0);
}