.card-flip {
  perspective: 1000px;
  cursor: pointer;
  aspect-ratio: 656/1077;
  width: 100%;
  border: 1px solid rgba(0,0,0,0.1);
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.card-flip.flipped .card-flip-inner {
  transform: rotateY(180deg);
}

.card-flip-front, .card-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 8px;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

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

.card-col {
  transition: opacity 0.3s ease;
}

.card-flip.enlarged {
  transform: scale(1.8);
  z-index: 1000;
  position: relative;
  transition: transform 0.3s ease;
}

.card-flip.enlarged .card-flip-inner {
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}