/* Эффект увеличения при наведении */
.zoom-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.zoom-hover:hover {
  transform: scale(1.3); /* Увеличение на 10% */
}

/* Начальное состояние изображений */
.zoom-on-scroll {
  opacity: 0; /* Изображение невидимо по умолчанию */
  transform: scale(0.5); /* Уменьшаем изображения */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Когда изображение появляется в области видимости */
.zoom-on-scroll.visible {
  opacity: 1; /* Изображение становится видимым */
  transform: scale(2); /* Увеличиваем изображение */
}

/* Когда изображение не в области видимости, оно уменьшено */
.zoom-on-scroll.hidden {
  transform: scale(0.5); /* Уменьшаем изображение, если оно не в области видимости */
}