.project-scroll-frame {
  position: relative;
  overflow: hidden;
}

.project-scroll-frame .project-scroll-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: object-position .7s ease-out;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-scroll-frame:hover .project-scroll-image {
    object-position: center bottom;
    transition-duration: var(--project-scroll-duration, 7s);
    transition-timing-function: linear;
  }
}