.card-container {
  display: grid;     
  perspective: 700px;
  -webkit-perspective: 700px;
  -moz-perspective: 700px;
  -ms-perspective: 700px;
  -o-perspective: 700px;
}

.card-flip {
  display: grid;
  
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  
  transition: all 0.7s ease;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;  
  -o-transition: all 0.7s ease;  
}

.card-flip, .card-container {
    
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  
  transition: all 0.7s ease;
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;   
  -o-transition: all 0.7s ease;       
}

.card-flip div {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden; 
  -o-backface-visibility: hidden;   
  backface-visibility: hidden;
  transform-style: preserve-3d;
}


.card-container:hover .card-flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


.front {
  grid-area: frontAndBack;
}

.back {
  grid-area: frontAndBack;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}