.scene--pause {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.42fr);
  gap: var(--space-pause);
  min-height: 120vh;
  padding: var(--space-section) max(1.25rem, 8vw);
  background:
    linear-gradient(to bottom, rgba(247, 242, 234, 0.92) 0%, rgba(247, 242, 234, 0.58) 24%, rgba(247, 242, 234, 0.4) 100%),
    image-set(url("../../assets/images/glimmering-cabin.webp") type("image/webp"));
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.scene--pause::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 0;
  height: clamp(18rem, 36vh, 34rem);
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(247, 242, 234, 0.08) 0%, rgba(247, 242, 234, 0.72) 58%, rgba(247, 242, 234, 0) 100%),
    image-set(url("../../assets/images/hero-poster.webp") type("image/webp")) center top / cover no-repeat;
  opacity: 0.28;
  mix-blend-mode: multiply;
}

.scene-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: var(--space-section);
  max-width: 34rem;
}

.lead {
  font-family: var(--font-cn-display);
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: var(--leading-loose);
  color: var(--color-wood);
}

.aside-soft {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 20rem;
  color: var(--color-ink-soft);
}

.scene--pause > .english-whisper {
  position: absolute;
  right: max(1.25rem, 8vw);
  bottom: var(--space-pause);
}

@media (max-width: 820px) {
  .scene--pause {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .aside-soft {
    max-width: 100%;
  }
}