/*#region Модальное окно фото */

/*
    Селектор .modal-info: Этот селектор применяется к основному контейнеру модального окна
    применяет стили к контейнеру, чтобы он охватывал весь экран, 
    затемняя его и делая основной контент 
    недоступным при открытом модальном окне
*/
.modal-info {
    display: none; /* По умолчанию невидимое */
    position: fixed; /* Фиксированное положение */
    z-index: 10000; /* Высокий z-index, чтобы быть наверху */
    left: 0; /* Левый край элемента по левому краю экрана */
    top: 0; /* Верхний край элемента по верхнему краю экрана */
    width: 100%; /* Ширина 100% от экрана */
    height: 100%; /* Высота 100% от экрана */
    overflow: auto; /* Полосы прокрутки, если содержимое превышает размеры */
    background-color: rgba(0, 0, 0, 0.9); /* Полупрозрачный черный фон */
}

    /*
        Этот селектор применяется к содержимому модального окна внутри основного контейнера
        чтобы центрировать его на экране и сохранить пропорции при отображении
    */
    .modal-info .modal-content {
        margin: auto; /* Центрирование по горизонтали */
        display: block; /* Блочный элемент */
        max-width: 90%; /* Максимальная ширина 90% от ширины экрана */
        max-height: 90%; /* Максимальная высота 90% от высоты экрана */
        position: absolute; /* Абсолютное позиционирование */
        top: 50%; /* Центрирование по вертикали (50% от высоты родителя) */
        left: 50%; /* Центрирование по горизонтали (50% от ширины родителя) */
        transform: translate(-50%, -50%); /* Центрирование модального окна */
        object-fit: contain; /* Сохранение пропорций изображения */
        border: 2px solid white; /* Добавление белой рамки */
        box-sizing: border-box; /* Учитывание рамки в размере элемента */
    }


/*#endregion */