@media screen and (max-width: 767px) {
  /* Keep the project mockup immediately visible when a swiped card becomes active. */
  .reference-scroll_card .reference-scroll_project-image {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .reference-scroll_card.is-active .reference-scroll_project-image {
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }

  .reference-scroll_card.is-prev {
    transform: translate3d(calc(-50% - (var(--reference-active-width) / 2) + .85rem), 0, 0);
  }

  .reference-scroll_card.is-next {
    transform: translate3d(calc(-50% + (var(--reference-active-width) / 2) - .85rem), 0, 0);
  }

  .reference-scroll_card.is-far-prev {
    transform: translate3d(calc(-50% - (var(--reference-active-width) / 2) - 1.75rem), 0, 0);
  }

  .reference-scroll_card.is-far-next {
    transform: translate3d(calc(-50% + (var(--reference-active-width) / 2) + 1.75rem), 0, 0);
  }

  /* Reposition only the rear card invisibly when it crosses the loop seam. */
  .reference-scroll_card.is-loop-teleport {
    opacity: 0 !important;
    transition: none !important;
  }
}