@media (hover: hover) and (pointer: fine) and (min-width: 921px) {
  .hero-art {
    overflow: visible;
    z-index: 1;
  }

  .hero-art .hero-poster {
    transform-origin: center center;
    transition: transform 340ms cubic-bezier(.22, 1, .36, 1),
      box-shadow 340ms ease, border-color 340ms ease;
  }

  .hero-art .hero-poster-back { z-index: 1; }
  .hero-art .hero-poster-mid { z-index: 2; }
  .hero-art .hero-poster-front { z-index: 3; }

  .hero-art .art-grid,
  .hero-art .art-note,
  .hero-art .art-stamp { pointer-events: none; }

  .hero-art .art-note,
  .hero-art .art-stamp { z-index: 5; }
}

@media (hover: hover) and (pointer: fine) and (min-width: 921px) and (prefers-reduced-motion: no-preference) {
  .hero-art .hero-poster:hover {
    z-index: 10;
    transform: translateY(-28px) rotate(0deg) scale(1.1);
    border-color: rgb(255 255 255 / 98%);
    box-shadow: 0 26px 42px rgb(32 53 36 / 23%), 0 8px 16px rgb(32 53 36 / 10%), inset 0 1px 0 #fff;
  }
}