.card-flip {
  perspective: 1000px;
}
.card-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
  position: relative;
  min-height: 100%;
}
.card-flipped .card-inner {
  transform: rotateY(180deg);
}
.card-front {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
  width: 100%;
  top: 0;
  left: 0;
  padding-bottom: 2rem;
}
.card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  padding-bottom: 2rem;
}
.badge {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}