.zoom-container {
    position: absolute; /* Для корректного работы */
    height: 100%; /* Занимает всю ширину родителя */
    overflow: hidden;
    border-radius: 10px;
}

.zoom-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease !important; /* Изменили на all */
    filter: brightness(1) blur(0); /* Добавили начальные фильтры */
}

.zoom-image:hover {
    transform: scale(1.1) !important;
    filter: brightness(0.5) blur(5px) !important; /* Затемнение + размытие */
}

/* Стили для текста */
.zoom-text {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 50, !important;
    /* остальные стили */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 18px;
    text-align: center;
    opacity: 0%;
    transition: opacity 0.3s ease !important;
    z-index: 2;
    pointer-events: none; /* Важно! Чтобы текст не перехватывал события мыши */
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); */
}

.zoom-container:hover .zoom-text {
    transform: translate(-50%, -50%), scale(1.1) !important;
    opacity: 1 !important;
    
}


.zoom-container-expert {
    position: absolute; /* Или absolute, если требуется по вёрстке Zero Block */
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.zoom-image-expert {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
    filter: brightness(1) blur(0);
    display: block;
}

.zoom-container-expert:hover .zoom-image-expert {
    transform: scale(1.1);
    filter: brightness(0.5) blur(5px);
}

/* Стили для текста */
.zoom-text-expert {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;    /* если нужен отступ и справа, иначе убрать */
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-align: left;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
    /* background: rgba(0,0,0,0.3);  если нужен полупрозрачный фон */
}

.zoom-container-expert:hover .zoom-text-expert {
    opacity: 1;
}

.zoom-text-expert {
    font-size: 16px; /* По умолчанию на десктопе */
}

@media (min-width: 1200px) {
    .zoom-text-expert {
        font-size: 16px;
    }
}
@media (min-width: 640px) {
    .zoom-text-expert {
        font-size: 14px;
    }
}
@media (min-width: 480px) {
    .zoom-text-expert {
        font-size: 14px;
    }
}
@media (min-width: 320px) {
    .zoom-text-expert {
        font-size: 9px;
    }
}