html.work-depth-motion .site-shell--workpage .work-feature__media {
  transform:
    perspective(1600px)
    translate3d(
      0,
      var(--work-feature-depth-y, 0),
      var(--work-feature-depth-z, 0)
    )
    rotateX(var(--work-feature-depth-pitch, 0deg))
    scale(var(--work-feature-depth-scale, 1.018));
  transform-origin: 50% 34%;
  will-change: transform;
}

html.work-depth-motion .site-shell--workpage .work-pathway__media {
  transform:
    perspective(1450px)
    translate3d(
      var(--work-pathway-depth-x, 0),
      var(--work-pathway-depth-y, 0),
      var(--work-pathway-depth-z, 0)
    )
    rotateY(var(--work-pathway-depth-yaw, 0deg))
    scale(var(--work-pathway-depth-scale, 1));
  transform-origin: 50% 52%;
  will-change: transform;
}

@media (max-width: 720px) {
  html.work-depth-motion .site-shell--workpage .work-feature__media {
    transform-origin: 50% 30%;
  }

  html.work-depth-motion .site-shell--workpage .work-pathway__media {
    transform: none;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.work-depth-motion .site-shell--workpage .work-feature__media,
  html.work-depth-motion .site-shell--workpage .work-pathway__media {
    transform: none;
    will-change: auto;
  }
}