div#project-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
	margin-bottom: 50px;
}
div.project {
	background-color: var(--selected-color);
	border-radius: var(--element-radius);
	color: white;
	width: 420px;
	height: 280px;
	overflow: hidden;
	position: relative;
	transition: bottom .2s;
	cursor: pointer;
}

div.thumbnail {
	width: 100%;
	height: 210px;
}
div.mortgage-background {
	background: url(../img/mortgage.png) center;
	background-size: cover;
}
div.thompson-background {
	background: url(../img/thompson.png) center;
	background-size: cover;
}
div.woolley-background {
	background: url(../img/woolley.png) center;
	background-size: cover;
}

div.project#thompson h2 {
	font-size: 22px;
}

div.moving-div {
	position: relative;
	bottom: 0;
	transition: bottom 0.2s;
}

div.banner {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25px;
	background-color: var(--window-color);
	position: relative;
	z-index: 2;
}
div.tech-icons {
	font-size: 0;
	display: grid;
	grid-auto-flow: column;
	grid-gap: 10px;
}
div.tech-icons img {
	height: 38px;
}
p#tech-label {
	position: absolute;
	left: 0;
	font-size: 20px;
	color: white;
	background-color: var(--selected-color);
	padding: 8px 12px;
	border-radius: 5px;
	z-index: 3;
	display: none;
}

div.description {
	background-color: rgba(20, 24, 45, 0.8);
	height: 140px;
	padding: 20px 25px;
	font-size: 20px;
	box-sizing: border-box;
}

button.expand-button {
	width: 100%;
	height: 70px;
	background-color: var(--selected-color);
	position: absolute;
	bottom: 0;
	z-index: 1;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background-color .2s;
}
button.expand-button span {
	font-size: 24px;
	font-weight: bolder;
	opacity: 0;
	transition: opacity 0.9s;
	user-select: none;
}
button.expand-button:hover { background-color: #3b4474; }

/* @media only screen and (max-width: 990px) { */
/* 	div#project-container { */
/* 		grid-template-columns: 1fr; */
/* 	} */
/* 	div.project { */
/* 		cursor: pointer; */
/* 	} */
/* 	div.description { */
/* 		display: none; */
/* 	} */
/* 	button.expand-button { */
/* 		display: none; */
/* 	} */
/* } */
/* @media only screen and (max-width: 520px) { */
/* 	div#project-container { */
/* 		grid-gap: calc((100vw - 420px) / 2); */
/* 	} */
/* } */
/* @media only screen and (max-width: 470px) { */
/* 	div#project-container { */
/* 		grid-gap: calc(100vw * 5 / 94); */
/* 	} */
/* 	div.project { */
/* 		/1* width: calc(100vw - 50px); *1/ */
/* 		/1* height: calc(((100vw - 50px) * 14) / 21); *1/ */
/* 		width: calc(100vw * 42 / 47); */
/* 		height: calc(100vw * 28 / 47); */
/* 		border-radius: calc(100vw * 3 / 47); */
/* 	} */
/* 	div.thumbnail { */
/* 		height: calc(100vw * 21 / 47); */
/* 	} */
/* 	div.banner { */
/* 		height: calc(100vw * 7 / 47); */
/* 		padding: 0 calc(100vw * 5 / 94); */
/* 	} */
/* 	div.banner h2 { */
/* 		font-size: calc(100vw * 16 / 235); */
/* 	} */
/* 	div.tech-icons { */
/* 		grid-gap: calc(100vw / 47); */
/* 	} */
/* 	div.tech-icons img { */
/* 		height: calc(100vw * 19 / 235); */
/* 	} */
/* } */
/* @media (orientation: landscape) and (max-height: 990px) { */
/* 	div#project-container { */
/* 		grid-template-columns: 1fr 1fr; */
/* 	} */
/* 	@media only screen and (max-width: 990px) { */
/* 		div#project-container { */
/* 			grid-gap: calc((100vw - 840px) / 3); */
/* 		} */
/* 	} */
/* 	@media only screen and (max-width: 915px) { */
/* 		div#project-container { */
/* 			grid-gap: 25px; */
/* 		} */
/* 		div.project { */
/* 			width: calc(100vw * 420 / 915); */
/* 			height: calc(100vw * 280 / 915); */
/* 			border-radius: calc(100vw * 30 / 915); */
/* 		} */
/* 		div.thumbnail { */
/* 			height: calc(100vw * 210 / 915); */
/* 		} */
/* 		div.banner { */
/* 			height: calc(100vw * 70 / 915); */
/* 			padding: 0 calc(100vw * 25 / 915); */
/* 		} */
/* 		div.banner h2 { */
/* 			font-size: calc(100vw * 32 / 915); */
/* 		} */
/* 		div.tech-icons { */
/* 			grid-gap: calc(100vw * 10 / 915); */
/* 		} */
/* 		div.tech-icons img { */
/* 			height: calc(100vw * 38 / 915); */
/* 		} */
/* 	} */
/* } */