.flip-card {
  background-color: transparent;
  width: 250px;
  height: 230px;
  perspective: 500px;
  margin: auto;
}

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

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

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 50%;
  box-shadow: 2px 10px 20px rgba(61, 54, 93, 0.658);
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-front {
  background-color: #f8f9fa;
}

.flip-card-front img {
  width: 60%;
  height: auto;
}

.flip-card-back {
  font-family: 'Dagelland', sans-serif;
  background: radial-gradient(circle at center, #532edb 0%, #210f8a 100%);
  color: rgb(255, 255, 255);
  transform: rotateY(180deg);
  text-align: center;
  padding: 20px;
  border-radius: 50%;
}