.audiobook-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 24%, rgba(168, 85, 247, .32), transparent 30%),
    radial-gradient(circle at 72% 74%, rgba(245, 158, 11, .22), transparent 28%),
    #171028;
}

.audiobook-hero::after {
  content: "";
  position: absolute;
  right: 7%;
  bottom: 12%;
  width: min(30vw, 370px);
  height: 116px;
  opacity: .55;
  background: repeating-linear-gradient(90deg, transparent 0 8px, #fbbf24 8px 12px, transparent 12px 20px);
  clip-path: polygon(0 46%, 6% 24%, 12% 70%, 18% 10%, 24% 88%, 30% 34%, 36% 62%, 42% 4%, 48% 95%, 54% 39%, 60% 72%, 66% 19%, 72% 85%, 78% 30%, 84% 60%, 90% 13%, 96% 78%, 100% 48%, 100% 58%, 96% 88%, 90% 23%, 84% 70%, 78% 40%, 72% 95%, 66% 29%, 60% 82%, 54% 49%, 48% 100%, 42% 14%, 36% 72%, 30% 44%, 24% 98%, 18% 20%, 12% 80%, 6% 34%, 0 56%);
}

.audiobook-hero .page-hero__inner { position: relative; z-index: 1; }
.audiobook-hero .page-hero__eyebrow { color: #fbbf24; }
.audiobook-hero .page-hero__cta { background: #f59e0b; color: #1d1430; }

.audiobook-art__disc {
  display: grid;
  width: min(100%, 390px);
  aspect-ratio: 1;
  margin-inline: auto;
  place-items: center;
  border: 22px solid #2f1b4b;
  border-radius: 50%;
  box-shadow: inset 0 0 0 18px #4c1d95, inset 0 0 0 56px #1f1633, 0 20px 50px rgba(76, 29, 149, .25);
  background: repeating-radial-gradient(circle, #211531 0 3px, #37204f 4px 7px);
}

.audiobook-art__disc span {
  display: grid;
  width: 96px;
  height: 96px;
  padding-left: 6px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  background: linear-gradient(135deg, #f59e0b, #ec4899);
}

@media (max-width: 767px) {
  .audiobook-hero::after { width: 65vw; right: -8%; opacity: .25; }
}