.flip-container {
  perspective: 1000px;
}

.flipper {
    position: relative;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    margin: 0 auto
}

.flipper:hover {
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
	.flipper {
		height: 230px;
		width: unset;
	}
}

.flip-container:hover .flipper {
  transform: rotateX(180deg);
}

.flipper-front,
.flipper-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  object-fit: contain;
}



.flipper-back {
  transform: rotateX(180deg);
}

/* Flip on desktop only */
@media (hover: hover) and (pointer: fine) {
  .flip-container:hover .flipper {
    transform: rotateX(180deg);
  }
}

/* ❌ Force reset on small screens (mobile) */
@media (max-width: 767px) {
  .flip-container:hover .flipper {
    transform: none !important;
  }
}