external-lib-assets {
    height: 100%;
    display: none;
    flex: 1;

}


.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    
    
        /* Минимальная и максимальная высота строки */
        grid-auto-flow: dense;
    /* Автоматическое заполнение колонок */
    gap: 4px;
    /* Расстояние между элементами */
    grid-auto-rows: minmax(100px, 160px);
    /* Базовая высота строки */
    grid-auto-flow: dense;
    /* Плотное заполнение */
}

.masonry-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.masonry-item img,
.masonry-item video {
    width: 100%;
    height: 100%;
    /* max-height: 150px;
                    ; */
    object-fit: cover;
    /* Сохраняет пропорции изображения */
    display: block;
    user-select: none;
        pointer-events: none;
        opacity: 0;
        /* Начальная прозрачность */
        animation: fadeInMGrid 0.7s ease-in-out forwards;
        /* Анимация появления */
    }
    
    @keyframes fadeInMGrid {
        from {
            opacity: 0;
            /* Начальное состояние: полностью прозрачный */
        }
    
        to {
            opacity: 1;
            /* Конечное состояние: полностью видимый */
        }
    }
    
    
    .masonry-item:nth-child(1) img,
    .masonry-item:nth-child(1) video {
        animation-delay: 0s;
        /* Задержка для второго изображения */
    }
    
    .masonry-item:nth-child(2) img,
    .masonry-item:nth-child(2) video {
        animation-delay: 0.05s;
        /* Задержка для второго изображения */
    }
    
    .masonry-item:nth-child(3) img,
    .masonry-item:nth-child(3) video {
        animation-delay: 0.1s;
        /* Задержка для третьего изображения */
    }
    
    .masonry-item:nth-child(4) img,
    .masonry-item:nth-child(4) video {
        animation-delay: 0.15s;
        /* Задержка для третьего изображения */
}

/* Разные высоты для элементов */
.masonry-item:nth-child(2n) {
    grid-row: span 2;
    /* Увеличиваем высоту каждого третьего элемента */
}

.masonry-item:nth-child(5n) {
    grid-row: span 1;
    
        /* Ограничиваем высоту элемента */
    /* Увеличиваем высоту каждого пятого элемента */
}

@media (max-width: 768px) {
    .masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

.observer-trigger {
    height: 1px;
    /* Невидимый элемент для отслеживания */
    grid-column: 1 / -1;
    /* Занимает всю ширину сетки */
}

/* Стили для кнопки */
.item-button-exlib {
    position: absolute;
    top: 50%;
    /* Размещаем по вертикали */
    left: 50%;
    /* Размещаем по горизонтали */
    transform: translate(-50%, -50%);
    /* Центрируем */
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.7);
    /* Полупрозрачный фон */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    /* Кнопка невидима по умолчанию */
    transition: opacity 0.3s ease;
    z-index:50;
    /* Плавное появление */
}

/* Показываем кнопку при наведении на .masonry-item */
.masonry-item:hover .item-button-exlib {
    opacity: 1;
    /* Кнопка становится видимой */
}
/* @media (max-width: 480px) {
    .masonry-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
} */

/* .loader-lib-assets {
    text-align: center;
    padding: 20px;
    font-size: 18px;
    color: #333;
}
*/