.sop {
  position: relative;
  width: 100%;
  height: var(--sop-height, 50vh);
  margin: 0 !important;
  padding: 0 !important;
  overflow: clip;
  background: transparent;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-padding-top: 0;
}

.sop__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.sop__scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  scroll-snap-align: start;
}

.sop__scene.is-active,
.sop__scene.is-prev,
.sop__scene.is-entering {
  opacity: 1;
}

.sop__scene.is-active { z-index: 3; }
.sop__scene.is-prev { z-index: 2; }
.sop__scene.is-entering { z-index: 4; }

.sop__half {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.sop__half img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  transition: transform 0.5s ease-in-out; /* Smooth image transitions */
}

.sop__scene.is-entering .sop__half--left {
  transform: translate3d(0, calc(var(--enter-progress, 0) * 0%), 0);
}
.sop__scene.is-entering .sop__half--right {
  transform: translate3d(0, calc(var(--enter-progress, 0) * 0%), 0);
}

.sop__scene.is-entering .sop__half--left,
.sop__scene.is-entering .sop__half--right,
.sop__scene.is-active .sop__half--left,
.sop__scene.is-active .sop__half--right,
.sop__scene.is-prev .sop__half--left,
.sop__scene.is-prev .sop__half--right {
  will-change: transform;
}

@media (max-width: 767px) {
  .sop {
    height: var(--sop-mobile-height, 50vh);
  }
}