.gallery {
  padding: clamp(75px, 11vw, 150px) clamp(24px, 9vw, 140px);
  background: #f4f3ed;
}

.gallery-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin-bottom: 50px;
}

.gallery-heading p:last-child {
  max-width: 340px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
}

.gallery-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 16px; }
.gallery-item { margin: 0; position: relative; overflow: hidden; min-height: 385px; background: #d7d9d1; }
.gallery-item img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.045); }
.gallery-item::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); }
.gallery-item figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; color: #fff; display: grid; gap: 5px; }
.gallery-item figcaption span { font: 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: #d8fa5b; }
.gallery-item figcaption strong { font-size: 14px; }

@media (max-width: 720px) {
  .gallery-heading { display: grid; gap: 20px; margin-bottom: 35px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 12px; }
  .gallery-item { min-height: 310px; }
}