#collection .index-image img[src*="/apsara/face-reveal-"] { object-position: 27% center; }
#collection .index-image:has(img[src*="/gamer-girls/trio-"]) { aspect-ratio: 1672 / 941; }
.apsara-gallery .apsara-wide .page-media { aspect-ratio: 1672 / 941; }

.project-page:has(.project-hero.apsara) .site-header {
  background: linear-gradient(180deg, #070d0bf2, #070d0bb8);
  color: #f4e8cb;
}
.project-hero.apsara {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 0;
  background: #0d100e;
}
.project-hero.apsara > * { grid-area: 1 / 1; }
.project-hero.apsara > .hero-art {
  position: relative; inset: auto; align-self: start;
  width: 100%; height: auto; aspect-ratio: 1933 / 813;
}
.project-hero.apsara .hero-art .scene {
  inset: 0; width: 100%; height: 100%; object-fit: contain; mask-image: none;
}
.project-hero.apsara .page-shade {
  background: linear-gradient(270deg, #080d0adb, #080d0a78 36%, transparent 65%);
}
.project-hero.apsara .project-hero-top {
  align-self: start; padding-top: 112px;
}
.project-hero.apsara .project-hero-copy {
  align-self: end; padding: 0 5% clamp(24px, 3vw, 56px) 55%;
}
.project-hero.apsara h1 { font-size: clamp(72px, 7vw, 132px); margin-block: 12px 16px; }
.project-hero.apsara .project-hero-copy > p:not(.eyebrow) { font-size: clamp(18px, 1.45vw, 23px); }

.project-hero.gamer-girls, .project-hero.gamer-girls .hero-art { background: #fcfbfa; color: #201a24; }
/* The cover and the hover canvas share one frame. Its white margins belong to the artwork. */
.project-hero.gamer-girls > .hero-art {
  inset: 50% auto auto 0; transform: translateY(-50%);
  width: 100%; height: auto; aspect-ratio: 1600 / 901;
}
.project-hero.gamer-girls .hero-art .scene {
  inset: 0; width: 100%; height: 100%; object-fit: fill; mask-image: none;
}
.project-page:has(.project-hero.gamer-girls) .site-header { background: #101413f2; }
.project-hero.gamer-girls .page-shade { background: none; }
.project-hero.gamer-girls .project-hero-top, .project-hero.gamer-girls .project-hero-copy { padding-left: 66%; }
.project-hero.gamer-girls .project-hero-top { flex-direction: column; align-items: start; gap: 8px; }
.project-hero.gamer-girls .project-hero-top .breadcrumbs { margin: 0; color: #463848; }
.project-hero.gamer-girls .eyebrow { color: #533e56; }
.project-hero.gamer-girls .project-hero-copy { padding-top: 45px; }
.project-hero.gamer-girls h1 { font-size: clamp(66px, 6.8vw, 114px); color: #201a24; }
.project-hero.gamer-girls .project-hero-copy > p:not(.eyebrow) { color: #322a35; }
.project-hero.gamer-girls .text-link { color: #332639; border-color: #9e939e; }
.gg-still { position: relative; overflow: hidden; }
.gg-still > img { display: block; width: 100%; height: auto; }
.gg-interactive[data-view="players"] [data-gg-frame="players"],
.gg-interactive[data-view="avatars"] [data-gg-frame="avatars"] { pointer-events: auto; }
.gg-tvarika-copy { pointer-events: none; }

@media (max-width: 1100px) {
  .project-hero.apsara { padding-top: 93px; }
  .project-hero.apsara .project-hero-top { grid-area: 1 / 1; padding-block: 16px; }
  .project-hero.apsara > .hero-art { grid-area: 2 / 1; }
  .project-hero.apsara .page-shade { display: none; }
  .project-hero.apsara .project-hero-copy { grid-area: 3 / 1; padding: 24px 5% 40px; }
}
@media (max-width: 900px) {
  .project-hero.gamer-girls { padding-bottom: 44px; }
  .project-hero.gamer-girls .project-hero-top, .project-hero.gamer-girls .project-hero-copy { padding-left: max(22px,5%); }
  .project-hero.gamer-girls .project-hero-top { display: block; }
  .project-hero.gamer-girls .project-hero-top > .eyebrow { margin-top: 8px; text-align: left; }
  .project-hero.gamer-girls > .hero-art {
    top: 167px; width: 150%; max-width: none; transform: none;
    mask-image: linear-gradient(0deg, transparent, #000 6%, #000 96%, transparent);
  }
  .project-hero.gamer-girls .project-hero-copy { padding-top: calc(84.5vw + 35px); }
  .project-hero.gamer-girls h1 { font-size: clamp(47px,12vw,88px); }
}
@media (max-width: 700px) {
  .project-hero.apsara { padding-top: 78px; }
  .project-hero.apsara .project-hero-top { padding-block: 14px; }
  .project-hero.apsara .project-hero-top > .eyebrow { margin: 4px 0 0; }
  .project-hero.apsara h1 { font-size: clamp(50px, 12vw, 82px); }
}