.hero-image {
  background-image:
    linear-gradient(90deg, transparent 65%, var(--black)),
    linear-gradient(0deg, rgba(16, 15, 13, .12), rgba(16, 15, 13, .02)),
    url('hero-performance.webp');
  background-position: center, center, 82% center;
  background-size: cover, cover, auto 100%;
}

.hero h1 {
  max-width: 12ch;
  margin-bottom: .7rem;
  font-size: clamp(4rem, 7vw, 7.2rem);
}

.hero-content .hero-subtitle {
  margin: 0 0 1.7rem;
  color: var(--gold);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.hero-content .hero-tagline {
  margin: 0 0 1.2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--gold);
  color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  line-height: 1.1;
}

.show-grid .poster img {
  padding: .6rem;
  object-fit: contain;
  transform: none;
}

@media (max-width: 850px) {
  .hero-image {
    background-image:
      linear-gradient(0deg, var(--black), transparent 45%),
      url('hero-performance.webp');
    background-position: center, 70% center;
    background-size: cover, auto 100%;
  }

  .hero h1 {
    font-size: clamp(3.3rem, 15vw, 5rem);
  }
}