.flip-container {
  perspective: 1000px;
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: 0.6s;
  transform-style: preserve-3d;

  /* opacity: 0;
  /* transform: rotateY(90deg); 
  transition: opacity 0.5s ease, transform 0.5s ease; */
}



.flip-container.active .flipper {
  transform: rotateY(180deg);
}

.flip-container p{
    padding: 5px;
    color: white;
    /* background-color:rgb(112 75 27 / 33%);; */
    position: relative;
    z-index: 999;
    bottom: 33px;
    font-size: large;
}
  @media (max-width: 576px) {
    .flip-container p{
        bottom: 70px;
        font-size: 40px;
    }
  }

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
    aspect-ratio: 3/4;
}

.front img, .back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
    width: 100%;
    display: block;
}

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