.flip-card {
  width: 100%;
  perspective: 100rem;
}
.flip-card-inner {
  position: relative;
  height: 100%;
  width: 100%;
  text-align: center;
  transform-style: preserve-3d;
}
.flip-card-back, .flip-card-front {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 0.8rem;
  backface-visibility: hidden;
  background-color: var(--w3-theme-l2-background-color) !important;
  color: var(--w3-theme-l2-color) !important;
}
.flip-card-back {
  transform: rotateY(-180deg);
}
.flip-flip-card {
  transform: rotateY(-180deg);
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.flip-card-inner {
  transition: transform 0.5s ease;
}
}