.flip-wrapper {
  background-color: transparent;
  perspective: 1000px;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
}

.flip-wrapper .flip-inner,
.flip-wrapper .e-con-inner.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-wrapper.flipped .flip-inner,
.flip-wrapper.flipped .e-con-inner.flip-inner {
  transform: rotateY(180deg);
}

.flip-wrapper .flip-front, 
.flip-wrapper .flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-wrapper .flip-back {
  transform: rotateY(180deg);
}

/* Fallback for when flip-inner doesn't exist */
.flip-wrapper:not(:has(.flip-inner)) {
  transform-style: preserve-3d;
}

.flip-wrapper:not(:has(.flip-inner)).flipped .flip-front {
  transform: rotateY(180deg);
}

.flip-wrapper:not(:has(.flip-inner)).flipped .flip-back {
  transform: rotateY(0deg);
}

.flip-wrapper:not(:has(.flip-inner)) .flip-front,
.flip-wrapper:not(:has(.flip-inner)) .flip-back {
  transition: transform 0.6s;
}