.gallery-image {
            cursor: pointer;
        }

        .lightbox {
            position: fixed;
            inset: 0;
            z-index: 9999;

            display: flex;
            align-items: center;
            justify-content: center;

            background: rgba(0, 0, 0, 0.92);

            opacity: 0;
            visibility: hidden;

            transition: opacity .2s ease;
        }

        .lightbox.active {
            opacity: 1;
            visibility: visible;
        }

        .lightbox-image {
            display: block;

            max-width: calc(100vw - 140px);
            max-height: calc(100vh - 60px);

            width: auto;
            height: auto;

            object-fit: contain;

            user-select: none;
        }

        .lightbox-close,
        .lightbox-prev,
        .lightbox-next {
            position: absolute;

            border: 0;
            background: none;
            color: white;

            cursor: pointer;

            opacity: .8;
        }

        .lightbox-close:hover,
        .lightbox-prev:hover,
        .lightbox-next:hover {
            opacity: 1;
        }

        .lightbox-close {
            top: 15px;
            right: 25px;

            font-size: 42px;
            line-height: 1;
        }

        .lightbox-prev,
        .lightbox-next {
            top: 50%;
            transform: translateY(-50%);

            font-size: 45px;
        }

        .lightbox-prev {
            left: 20px;
        }

        .lightbox-next {
            right: 20px;
        }

        body.lightbox-open {
            overflow: hidden;
        }

        .lightbox-loader {
            position: absolute;
            top: 50%;
            left: 50%;

            width: 40px;
            height: 40px;

            margin: -20px 0 0 -20px;

            border: 3px solid rgba(255, 255, 255, 0.3);
            border-top-color: #fff;
            border-radius: 50%;

            animation: lightbox-spin .8s linear infinite;
        }

        @keyframes lightbox-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .lightbox-loader.hidden {
            display: none;
        }

        @media (max-width: 768px) {
            .lightbox {
                padding: 15px;
            }

            .lightbox-image {
                max-width: calc(100vw - 30px);
                max-height: calc(100vh - 100px);
            }

            .lightbox-prev,
            .lightbox-next {
                font-size: 32px;
            }

            .lightbox-prev {
                left: 8px;
            }

            .lightbox-next {
                right: 8px;
            }

            .lightbox-close {
                top: 10px;
                right: 15px;
                font-size: 36px;
            }
        }