.services-directory {
  --services-sticky-top: clamp(20px, 5vw, 84px);
}

.services-directory__media {
  position: relative;
  overflow: hidden;
}

.services-directory__lottie {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.92;
}

@media (min-width: 1025px) {
  .services-directory.services-directory--stack-ready .services-directory__item {
    position: relative;
    align-items: start;
  }

  .services-directory.services-directory--stack-ready .services-directory__item > .services-directory__media {
    position: sticky;
    top: var(--services-sticky-top);
    align-self: start;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.45s;
    will-change: opacity;
    z-index: 1;
  }

  .services-directory.services-directory--stack-ready .services-directory__item.is-active > .services-directory__media {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
    z-index: 3;
  }

  .services-directory.services-directory--stack-ready .services-directory__item > .services-directory__content {
    position: relative;
    z-index: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-directory.services-directory--stack-ready .services-directory__item > .services-directory__media,
  .services-directory.services-directory--stack-ready .services-directory__item.is-active > .services-directory__media {
    transition: none;
  }
}