#main-div {
	display: grid;
	position: absolute;
	grid-template-areas:
		"1 2 3"
		"4 5 6";
	grid-template-columns: 30vw;
	column-gap: 2.5vw;
	row-gap: 3vw;
	width: 95vw;
	right: 2.5vw;
	top: 225px;
	padding-bottom: 32px;

	text-transform: uppercase;
}

#image-wrapper {
	width: 30vw;
	text-align: center;
}

#main-div a {
	text-decoration: none;
	color: #444444;
}

#main-div a:hover img {
	transform: scale(1.15);
}

#main-div a img {
	transition: transform 0.2s;
	width: 25vw;
}

#main-div a h2,
#main-div a p {
	margin-top: 16px;
	margin-bottom: 0;
	width: 30vw;
	text-align: center;
}

#a1 {
	grid-area: 1;
}
#a2 {
	grid-area: 2;
}
#a3 {
	grid-area: 3;
}
#a4 {
	grid-area: 4;
}
#a5 {
	grid-area: 5;
}
#a6 {
	grid-area: 6;
}

.work-title {
	font-size: 24px;
}

.work-year {
	color: #444444;
}

h1 {
	text-align: center;
	margin-bottom: 5vh;
	font-size: 60px;
	color: #444444;
}

@media screen and (max-width: 700px) {
	#main-div {
		grid-template-areas:
			"1"
			"2"
			"3"
			"4"
			"5"
			"6";
		grid-template-columns: 90vw;
		column-gap: 0;
	}

	#image-wrapper {
		width: 90vw;
		text-align: center;
	}

	#main-div a img {
		transition: transform 0.2s;
		width: 75vw;
	}

	#main-div a h2,
	#main-div a p {
		margin-top: 16px;
		margin-bottom: 0;
		width: 90vw;
		text-align: center;
	}

	#main-div a {
		left: 3vw;
		position: relative;

		text-decoration: none;
		color: #444444;
	}
}