.card-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 12px;
    perspective: 900px;
    text-align: center;
    margin-top: 15px;
}
.regular-card {
    width: 98%;
    height: 200px;
    position: relative;
}
.card {
  position: relative;
  width: 100%;
  height: 200px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}
.front img { 
    height: 200px;
    border-radius : 5px;
}

.front, .back {
  position: absolute;
  background: #676B6D;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  border-radius: 5px;
  color: white;
  /*box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);*/
  backface-visibility: hidden;
}

.front {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

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