main {
  padding: 2vw;
  padding-top: 24vh;
}

main h2 {
  margin-top: 20vh;
  margin-left: 0;
  font-size: 3rem;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	/* Compensate for excess margin on outer gallery flex items */
	margin: -1rem -1rem;
}
/* if display: grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 47vw);
  grid-gap: 1vw;
}
.gallery,
.gallery-item {
  margin: 0;
}

.gallery-item {
  position: relative;
	/* Minimum width of 24rem and grow to fit available space */
	flex: 1 0 24rem;
	/* Margin value should be half of grid-gap value as margins on flex items don't collapse */
	margin: 0.4rem;
	overflow: hidden;
  background-color: #000;
}

.description {
  position: absolute;
  bottom: 0;
  padding: .5rem;
}
.description h3 {
  margin: 0 0 .5rem;
  font-weight: 700;
  color: #eee;
}
.description h4 {
  margin: 0;
  color: #cccdc7;
}

.gallery img {
	display: block;
	width: 100%;
	height: 48vw;
	object-fit: cover;
  object-position: 50% 50%;
	transition: transform 100ms ease-out, opacity 100ms ease-out;
}

.gallery-item:hover .gallery-image, [href^="/project/"]:focus .gallery-image {
	transform: scale(1.05);
  opacity: 0.5;
}

.gallery-item#memorial-c .gallery-image {
  opacity: 0.5;
}
.gallery-item#memorial-c:hover .gallery-image {
  opacity: 0.2;
}
.gallery-item#history-education .gallery-image {
  object-position: bottom left;
}
.gallery-item#lcm-app .gallery-image {
  object-position: bottom;
}
/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling.

*/

/* mobile */
@media screen and (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(1, 96vw);
  }
  .gallery img {
    height: 96vw;
  }
}

/* desktop */
@media screen and (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(3, 31vw);
  }
  .gallery img {
    height: 31vw;
  }
}