.card-container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  min-width: 490px;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.6s;
  transition: -webkit-transform 0.6s;
  -o-transition: transform 0.6s;
  transition: transform 0.6s;
  transition: transform 0.6s, -webkit-transform 0.6s;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.card.is-flipped {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card-front {
  background-color: #fff;
}

@media (max-width: 1279px) {
  .card-container {
    min-width: 100%;
    min-height: 100%;
  }
  .card-face {
    height: auto;
  }
}