.flip {
    -webkit-perspective: 800;   
            perspective: 800;
          position: relative;
          text-align: center;
  }
  .flip .card.flipped {
    -webkit-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
  }
  .flip .card {
      /* width: 270px;
      height: 178px; */
      -webkit-transform-style: preserve-3d;
      -webkit-transition: 0.5s;
      transform-style: preserve-3d;
      transition: 0.5s;
      background-color: #fff;
     
  }
  .flip .card .face {
    -webkit-backface-visibility: hidden ;
      backface-visibility: hidden ;
     z-index: 2;
  }
  .flip .card .front {
     /* position: absolute; */
     /* width: 270px; */
     z-index: 1;
  }
  .flip .card .front img{
    /* width: 270px;
    height: 100%; */
  }
  .flip .card .img {
     position: relaitve;
     /* width: 270px;
     height: 178px; */
     z-index: 1;
     border: 2px solid #000;
  }
  .flip .card .back {
    /* padding-top: 10%; */
    -webkit-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
    position: absolute;
  }
  .inner{
    /* margin:0px !important;
    width: 270px; */
  }