/* Стиль для контейнера карточки */
.card {
  position: relative;
  display: inline-block;
  width: 100%; /* Используем ширину блока */
  height: 100%; /* Используем высоту блока */
  perspective: 1000px; /* Эффект 3D-перспективы */
}

/* Лицевая и оборотная стороны карточки */
.front1, .back1 {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Скрывает оборотную сторону, когда она повернута */
}

/* Эффект переворота для оборотной стороны */
.back1 {
  transform: rotateY(180deg); /* Переворачиваем оборотную сторону */
}

/* Эффект переворота при наведении */
.card:hover .front1 {
  transform: rotateY(180deg); /* Переворачиваем лицевую сторону */
}

.card:hover .back1 {
  transform: rotateY(0deg); /* Показываем оборотную сторону */
  transition: transform 0.6s; /* Плавный переход */
}