.wtps-doubleImage {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  max-width: 100%;

  width: var(--doubleimagewidth);
  height: var(--doubleimageheight);
  min-width: var(--doubleimagewidth);
  min-height: var(--doubleimageheight);
}

.wtps-doubleImage__container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  border-radius: var(--doubleimagerounded);
}

.wtps-doubleImage__image {
  width: 100%;
  height: 100%;
  position: absolute;
}

.wtps-doubleImage__image img {
  width: 100%;
  height: 100%;

  object-fit: var(--doubleimageobjectfit);
}

.wtps-doubleImage__image[data-image="first"] img {
  object-position: var(--doubleimageobjectpositionfirst, center);
}

.wtps-doubleImage__image[data-image="second"] img {
  object-position: var(--doubleimageobjectpositionsecond, center);
}

/* Transiciones comunes: transform para zoom/slide y opacity para visibilidad */
.wtps-doubleImage .wtps-doubleImage__image[data-image="second"] {
  --di-timeappear: 0.2s;
  transition: transform var(--doubleimagetransitiontime) ease, opacity var(--di-timeappear) ease;
  /* Iniciamos ocultos o sin transformar */
  opacity: 0;
}

/* ==========================
   1) EFECTO ZOOM
   ========================== */

/* Estado inicial: escala 1 (sin zoom) */
.wtps-doubleImage[data-effect="zoom"] .wtps-doubleImage__image[data-image="second"] {
  transform: scale(1);
  --di-timeappear: calc(var(--doubleimagetransitiontime) * 0.5);
}

/* Al hacer hover o .touching: ampliamos hasta scale(1.2) y lo hacemos visible */
.wtps-doubleImage[data-effect="zoom"]:hover .wtps-doubleImage__image[data-image="second"],
.wtps-doubleImage[data-effect="zoom"].touching .wtps-doubleImage__image[data-image="second"] {
  transform: scale(1.2);
  opacity: 1;
}

/* ==========================
   2) EFECTO SLIDE UP
   ========================== */

/* Estado inicial: desplazada hacia abajo fuera de vista */
.wtps-doubleImage[data-effect="slideUp"] .wtps-doubleImage__image[data-image="second"] {
  transform: translateY(100%);
}

/* Al hacer hover o .touching: volvemos a su posición natural y hacemos visible */
.wtps-doubleImage[data-effect="slideUp"]:hover .wtps-doubleImage__image[data-image="second"],
.wtps-doubleImage[data-effect="slideUp"].touching .wtps-doubleImage__image[data-image="second"] {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================
   3) EFECTO SLIDE DOWN
   ========================== */

/* Estado inicial: desplazada hacia arriba fuera de vista */
.wtps-doubleImage[data-effect="slideDown"] .wtps-doubleImage__image[data-image="second"] {
  transform: translateY(-100%);
}

/* Al hacer hover o .touching: volvemos a su posición natural y hacemos visible */
.wtps-doubleImage[data-effect="slideDown"]:hover .wtps-doubleImage__image[data-image="second"],
.wtps-doubleImage[data-effect="slideDown"].touching .wtps-doubleImage__image[data-image="second"] {
  transform: translateY(0);
  opacity: 1;
}

/* ==========================
   4) EFECTO SLIDE LEFT
   ========================== */

/* Estado inicial: desplazada hacia la derecha fuera de vista */
.wtps-doubleImage[data-effect="slideLeft"] .wtps-doubleImage__image[data-image="second"] {
  transform: translateX(-100%);
}

/* Al hacer hover o .touching: volvemos a su posición natural y hacemos visible */
.wtps-doubleImage[data-effect="slideLeft"]:hover .wtps-doubleImage__image[data-image="second"],
.wtps-doubleImage[data-effect="slideLeft"].touching .wtps-doubleImage__image[data-image="second"] {
  transform: translateX(0);
  opacity: 1;
}

/* ==========================
   5) EFECTO SLIDE RIGHT
   ========================== */

/* Estado inicial: desplazada hacia la izquierda fuera de vista */
.wtps-doubleImage[data-effect="slideRight"] .wtps-doubleImage__image[data-image="second"] {
  transform: translateX(100%);
}

/* Al hacer hover o .touching: volvemos a su posición natural y hacemos visible */
.wtps-doubleImage[data-effect="slideRight"]:hover .wtps-doubleImage__image[data-image="second"],
.wtps-doubleImage[data-effect="slideRight"].touching .wtps-doubleImage__image[data-image="second"] {
  transform: translateX(0);
  opacity: 1;
}

/* ==========================
   6) EFECTO OPACITY
   ========================== */

/* Estado inicial: completamente invisible */
.wtps-doubleImage[data-effect="opacity"] .wtps-doubleImage__image[data-image="second"] {
  opacity: 0;
  --di-timeappear: var(--doubleimagetransitiontime);
}

/* Al hacer hover o .touching: lo hacemos completamente visible */
.wtps-doubleImage[data-effect="opacity"]:hover .wtps-doubleImage__image[data-image="second"],
.wtps-doubleImage[data-effect="opacity"].touching .wtps-doubleImage__image[data-image="second"] {
  opacity: 1;
}