.card-wrapper .card {
    position: relative;
    cursor: pointer;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
    transform-style: preserve-3d;
  }
  .card-wrapper .card .front,
  .card-wrapper .card .back {

    backface-visibility: hidden;
   
  }
 
 
  .card-wrapper.flip-up .card .back {
    transform: rotateX(180deg);
  }
  .card-wrapper.flip-up:hover .card {
    transform: rotateX(180deg);
  }
  .card-wrapper.flip-down .card .back {
    transform: rotateX(-180deg);
  }
  .card-wrapper.flip-down:hover .card {
    transform: rotateX(-180deg);
  }