.work {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 6em auto;
	column-gap: 0.5em;
	row-gap: 0.2em;
}
.work > h2 {
    grid-column: span 2;
	padding-left: 1em;
	margin-top: 1em;
}
.work div img {
	border-radius: 1em;
}
.work a {
	position: relative;
	line-height: 1;
}
.work .work-details {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 3%;
	background-color: #f8f8f8d5;
	padding: 3%;
	border-radius: 0.7em;
}
@media screen and (max-width: 768px) {
	.work {
		grid-template-columns: repeat(1, 1fr);
		margin-top: 3em;
	}
	.work > h2 {
    grid-column: auto;
	font-size: 2rem;
	}
}
@media screen and (max-width: 500px) {
	.work > h2 {
    padding-left: 1rem;
	}
}