.hero-brand-art {
  position: absolute;
  right: 2%;
  top: 12%;
  width: min(47vw, 700px);
  opacity: .16;
  filter: saturate(.9);
  mix-blend-mode: screen;
}
.hero-brand-art img { width: 100%; display: block; mask-image: linear-gradient(to left, #000 42%, transparent 100%); }
.portrait-frame { margin: 0; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; filter: saturate(.82) contrast(1.04); }
.portrait-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #07172db8 0, transparent 35%); pointer-events: none; }
.portrait-frame figcaption { position: absolute; z-index: 2; bottom: 26px; left: 28px; right: 28px; font-size: 10px; font-weight: 900; letter-spacing: 2px; color: #fff; }
.portrait-frame figcaption span { color: var(--gold); padding: 0 5px; }
.product-art { overflow: visible; }
.book-cover { position: absolute; width: 42%; max-height: 82%; object-fit: contain; left: 12%; top: 8%; z-index: 2; box-shadow: 0 24px 42px #07172d50; transform: rotate(-5deg); }
.challenge-art { position: absolute; width: 62%; height: auto; object-fit: contain; right: -1%; bottom: 5%; z-index: 3; filter: drop-shadow(0 18px 18px #07172d55); }
@media (max-width: 900px) {
  .hero-brand-art { width: 70vw; right: -15%; top: 20%; }
  .product-art { overflow: hidden; }
  .portrait-frame img { object-position: center 30%; }
}
@media (max-width: 540px) {
  .hero-brand-art { display: none; }
  .book-cover { width: 48%; left: 8%; }
  .challenge-art { width: 72%; right: -8%; }
}