.movie-product {
  --product: #24a5ff;
  --product-soft: #dff2ff;
}

.movie-hero-art {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 78% 18%, rgba(52, 165, 255, .48), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(114, 69, 255, .38), transparent 34%),
    linear-gradient(145deg, #07111d, #111d2c 58%, #05080d);
  box-shadow: var(--shadow);
}

.movie-phone {
  position: absolute;
  width: 52%;
  border: 7px solid rgba(255, 255, 255, .12);
  border-radius: 34px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}

.movie-phone-back { inset: 54px auto auto 8%; rotate: -8deg; opacity: .72; }
.movie-phone-front { inset: 26px 7% auto auto; rotate: 7deg; z-index: 2; }

.movie-gallery-section { overflow: hidden; }
.movie-gallery-copy { max-width: 700px; margin-bottom: 42px; }
.movie-gallery-copy h2 { margin: 0 0 18px; }
.movie-gallery-copy p { margin: 0; color: var(--muted); font-size: 1.15rem; }
.movie-screenshots { align-items: end; }
.movie-screenshots img { border: 1px solid rgba(255, 255, 255, .1); background: #07111d; }
.movie-screenshots img:nth-child(2) { translate: 0 -28px; }
.movie-attribution { margin-top: 24px !important; margin-bottom: 0 !important; color: #9296a3 !important; font-size: .82rem; }

@media (max-width: 820px) {
  .movie-hero-art { min-height: 470px; grid-row: 1; }
}

@media (max-width: 600px) {
  .movie-hero-art { min-height: 390px; }
  .movie-phone { width: 56%; border-width: 5px; border-radius: 25px; }
  .movie-phone-back { inset-block-start: 44px; }
  .movie-phone-front { inset-block-start: 20px; }
  .movie-screenshots img:nth-child(2) { translate: 0; }
}