.somex-rotator{
  position: relative;
  overflow: hidden;
}

/*
  Fail-safe behavior:
  - Images are visible by default.
  - Only the non-active image is hidden (opacity:0).
  This prevents "all images gone" if a class or script fails.
*/
.somex-rotator__img{
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 900ms ease-in-out, transform 1800ms ease-in-out;
  will-change: opacity, transform;
}

/* Active image stays in normal flow to provide container height */
.somex-rotator__img.is-active{
  position: relative;
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* Inactive image overlays the active image, but is hidden until activated */
.somex-rotator__img:not(.is-active){
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  z-index: 2;
}

/* When JS swaps, the "idle" image becomes active (opacity 1) */
.somex-rotator__img.is-active{
  opacity: 1;
}