.flip {
  width: 190px;
  height: 254px;
  perspective: 1000px;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d; 
  transition: transform 1.000s; 
}

.flip:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  width: 190px;
  height: 254px;
  box-sizing: border-box;
  border-radius: 20px;
  position: absolute;
  backface-visibility: hidden;
}

.flip-front {
  color: #fff; 
  display: flex;
  align-items: center;
  border: 2px solid #c3c6ce; 
  border-radius: 20px; 
  justify-content: center; 
  font-size: 24px;
  transform: rotateY(0deg); 
}

.flip-back {
  color: #fff; 
  display: flex;
  align-items: center;
  border: 2px solid #ffc90c; 
  border-radius: 20px; 
  justify-content: center; 
  font-size: 24px;
  transform: rotateY(180deg); 
}