/* Стили для увеличения изображения при наведении */
.card-img-top {
    transition: transform 0.3s;
    position: relative;
    /* Устанавливаем относительное позиционирование для контейнера изображения */
    z-index: 1;
    /* Устанавливаем высокий z-index для всех изображений */
    height: 100%;
    /* Устанавливаем фиксированную высоту */
    object-fit: cover;
    /* Масштабируем изображения, чтобы они полностью заполняли контейнер */
    transform-origin: 50% 20%;
    /* Центрирование при масштабировании */
}

.card-img-top:hover {
    transform: scale(2.5);
    /* Увеличиваем изображение */
    z-index: 2;
    /* Увеличиваем z-index для увеличенного изображения */
}

/*=====================================*/
/* Пример стилей для плавного перехода */
.table-responsive {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.fade-out {
    opacity: 0;
}