/* настойка адаптивной галареи первый блок о том, как будет отображаться на экранах от 1000 пикселей -- ширина пикселей задается в следующем блоке */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 столбца с равной шириной */
    gap: 200px; /* отступ между изображениями */
    /* указание максимальной ширины, если необходимо */
    max-width: 100%;  
    margin: 100px;  /* отступы от краев миниатюрами */
    justify-content: center; /* Выравнивание элементов по горизонтали по центру */
    align-items: center;     /* Выравнивание элементов по вертикали по центру */
    
}

.gallery img {
    width: 100%;
    height: auto;
}

/* Адаптивный стиль для мобильных устройств (например, 1 столбец) */
@media (max-width: 2000px) { 
    .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2px;
    /* указание максимальной ширины, если необходимо */
    max-width: 100%; 
    justify-content: center; /* Выравнивание элементов по горизонтали по центру */
    align-items: center;     /* Выравнивание элементов по вертикали по центру */
}

.gallery img {
    width: 100%;
    height: auto;
    /* указание максимальной ширины, если необходимо */
    max-width: 100%;  
}

.gallery img {
    width: 400px; /* или любой другой размер */
    margin: 100px;  /* отступы между миниатюрами */
    border: 0px solid #ccc;
    transition: transform 0.0s;
}

.gallery img {
    width: 290px; /* или любой другой размер */
    margin: 10px;  /* отступы между миниатюрами */
    border: 0px solid #ccc;
    transition: transform 0.0s;
}

.gallery img:hover {
    transform: scale(1.01);
}


/* настройка стилистики изображения в открывающемся окне */
.lb-image, .lb-nav a {
    border: none !important;
}

.lb-image, .lb-outerContainer, .lb-dataContainer, .lb-nav a {
    border-radius: 0 !important;
}

.lb-number {
    display: none !important;
}

.lb-caption {
    font-size: 16px;  /* Пример изменения размера шрифта */
    color: #fff;     /* Пример изменения цвета текста */
    /* Добавьте другие стили по вашему усмотрению */
}

/* Отключение анимации для изображений в Lightbox */
.lb-image, .lb-nav, .lb-prev, .lb-next {
    transition: none !important;
}

/* Отключение анимации фейда для оверлея и контейнера */
.lb-dataContainer, .lb-outerContainer, #lightboxOverlay {
    transition-duration: 0s !important;
}