.project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px 28px;
}
.project { min-width: 0; }
.project-featured { grid-column: 1 / -1; }
.project-image {
  display: block;
  width: 100%;
  height: clamp(330px, 42vw, 610px);
  padding: 0;
  border: 0;
  background: #315348;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  color: #fff;
  text-align: left;
}
.project:not(.project-featured) .project-image { height: clamp(300px, 34vw, 470px); }
.project-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(5, 28, 22, .62));
}
.project-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1);
}
.project-image span {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  bottom: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 10px var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.project-image span b { font: 400 21px var(--sans); }
.project-image:hover img { transform: scale(1.025); }
.project-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 25px;
  padding-top: 17px;
}
.project h3 { font: 500 22px var(--serif); margin: 0; text-align: right; }
.project-copy p {
  margin: 0;
  color: #6a8178;
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gallery-viewer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 8vw;
  background: rgba(3, 18, 14, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.gallery-viewer.active { opacity: 1; visibility: visible; }
.gallery-viewer figure {
  width: min(1160px, 100%);
  height: 90vh;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.gallery-viewer img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-viewer figcaption {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}
.gallery-viewer-count {
  margin: 0;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.gallery-viewer-close,
.gallery-viewer-nav {
  position: absolute;
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.gallery-viewer-close { top: 21px; right: 28px; font: 300 38px/1 var(--sans); }
.gallery-viewer-nav { top: 50%; padding: 18px; font: 300 30px var(--sans); }
.gallery-viewer-prev { left: 1.5vw; }
.gallery-viewer-next { right: 1.5vw; }
.gallery-open { overflow: hidden; }

@media (max-width: 760px) {
  .project-grid { grid-template-columns: 1fr; gap: 40px; }
  .project-featured { grid-column: auto; }
  .project-image,
  .project:not(.project-featured) .project-image { height: 360px; }
  .project-copy { display: block; }
  .project h3 { margin-top: 5px; text-align: left; }
  .gallery-viewer { padding: 64px 5vw 24px; }
  .gallery-viewer figure { height: 85vh; }
  .gallery-viewer-nav { top: auto; bottom: 18px; z-index: 2; }
  .gallery-viewer-prev { left: auto; right: 65px; }
  .gallery-viewer-next { right: 15px; }
}