.hero-image {
  background-image: linear-gradient(90deg, rgba(9, 10, 9, .78), rgba(9, 10, 9, .24) 58%, rgba(9, 10, 9, .08)), url('./assets/real-event.webp');
}

.feature-photo {
  background-image: url('./assets/wood-fired-rib.png');
}

.project-image {
  background-image: url('./assets/real-small-bites.webp');
}

.real-gallery {
  padding: 10rem 6vw;
  background: #171918;
  color: white;
}

.real-gallery h2 {
  max-width: 850px;
  margin: .3em 0 4rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(3rem, 5vw, 5.5rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: .95;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr .85fr;
  grid-auto-rows: 330px;
  gap: 1rem;
}

.gallery-grid figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #282a29;
}

.gallery-grid figure:first-child { grid-row: span 2; }
.gallery-grid figure:nth-child(4) { grid-column: span 2; }

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

.gallery-grid figure:hover img { transform: scale(1.025); }

.gallery-grid figcaption {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  padding: .5rem .7rem;
  background: rgba(23, 25, 24, .82);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .real-gallery { padding: 6rem 24px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
  .gallery-grid figure:first-child { grid-row: span 1; grid-column: span 2; }
  .gallery-grid figure:nth-child(4) { grid-column: span 1; }
  .gallery-grid figure:last-child { grid-column: span 2; }
}