.gallery-hero { background: #141910; }
.hero-scene { object-position: center 38%; }
.gallery-hero::after {
  background: linear-gradient(90deg, #111710ed, #141810b8 37%, #151b1233 65%, transparent 86%),
              linear-gradient(0deg, #10140dd6, transparent 28%);
}

@media (max-width: 720px) {
  .gallery-hero { --hero-photo-height: clamp(214px, 64vw, 350px); }
  .hero-scenes { height: var(--hero-photo-height); }
  .hero-scene { object-position: 76% 42%; }
  .gallery-hero-content { padding-top: clamp(154px, 47vw, 270px); }
  .gallery-hero::after {
    background: linear-gradient(180deg, transparent 36%, #14191086 64%, #141910);
    background-size: 100% var(--hero-photo-height);
    background-repeat: no-repeat;
  }
}