.projects { background: #f3f5f6; }

.project-heading {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 3rem;
}

.project-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  border-top: 1px solid #d7dce0;
  padding-top: 1.25rem;
}

.project-meta p { margin: 0; color: #18232d; font-weight: 700; }

.project-meta span {
  display: block;
  margin-bottom: .35rem;
  color: #686f75;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.project-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.project-gallery figure {
  margin: 0;
  min-height: 245px;
  overflow: hidden;
  background: #d7dce0;
}

.project-gallery .project-main { grid-column: 1 / -1; min-height: 440px; }

.project-gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease;
}

.project-gallery figure:hover img { transform: scale(1.018); }

.project-gallery-two figure { min-height: 330px; }

.project-gallery-lids {
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr);
  align-items: stretch;
}

.project-gallery-lids .project-main {
  grid-column: auto;
  min-height: 420px;
}

.project-gallery-lids .project-lids-storefront { min-height: 420px; }

.project-divider {
  height: 1px;
  margin: clamp(4rem, 7vw, 6.5rem) 0;
  background: #c9ced2;
}

@media (max-width: 960px) {
  .project-heading { grid-template-columns: 1fr; gap: 2rem; }
  .project-gallery .project-main { min-height: 360px; }
}

@media (max-width: 600px) {
  .project-meta,
  .project-gallery { grid-template-columns: 1fr; }
  .project-gallery .project-main { grid-column: auto; min-height: 260px; }
  .project-gallery figure { min-height: 225px; }
  .project-gallery-two figure { min-height: 220px; }
  .project-gallery-lids { grid-template-columns: 1fr; }
  .project-gallery-lids .project-main,
  .project-gallery-lids .project-lids-storefront { min-height: 250px; }
}