.lightGallery-captions {
    h4 {
        transform: translate3d(60px, 0, 0px);
    }
    p {
        transform: translate3d(-60px, 0, 0px);
    }
    h4,
    p {
        opacity: 0;
    }
}
.lg-current {
    .lightGallery-captions {
        h4,
        p {
            transform: translate3d(0, 0, 0px);
        }
        h4,
        p {
            opacity: 1;
        }
    }
}
.lg-slide-progress {
    .lightGallery-captions {
        h4 {
            transform: translate3d(-60px, 0, 0px);
        }
        p {
            transform: translate3d(60px, 0, 0px);
        }
        h4,
        p {
            opacity: 0;
        }
    }
}

.lightGallery-captions {
    h4,
    p {
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in;
    }
}
.lg-current {
    .lightGallery-captions {
        h4,
        p {
            transition-delay: 500ms;
        }
    }
    &.lg-slide-progress {
        .lightGallery-captions {
            h4,
            p {
                transition-delay: 0ms;
            }
        }
    }
}

// For inline gallery
.inline-gallery-container {
    padding-bottom: 100%;
    height: 0;
    @include media-breakpoint-up(sm) {
        padding-bottom: 65%;
    }
}

.gallery-demo-sm {
    margin-bottom: 1rem;
}

// Responsive thumbnails {
// .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
//     transform: translate3d(0, -30px, 0) !important;
// }

.vertical-gallery {
    --bs-gutter-x: 20px;
    .first-row {
        padding-top: 80px;
    }
    .third-row {
        padding-top: 45px;
    }

    .gallery-item {
        margin-bottom: 20px;
        display: block;
    }
}

.gallery-demo-videos {
    .lg-video-play-button {
        width: 25%;
    }
    .lg-video-play-icon,
    .lg-video-play-icon-bg {
        opacity: 0.65;
    }
    .lg-video-play-icon-bg {
        stroke: rgba(255, 255, 255, 0.65);
    }
}

.lg-sub-html {
    color: #e0e0e0 !important;
    h4 {
        font-weight: 400 !important;
    }
    a {
        color: #fff !important;
        font-weight: 500 !important;
        margin-right: 10px !important;
    }
}
.lightGallery-white-theme {
    $lg-theme-color: #fff;
    $lg-theme-highlight: #333;
    $lg-thumb-bg: #fcfcfc;
    $lg-next-prev-bg: rgba(0, 0, 0, 0.03);
    $lg-next-prev-color: #444;
    $lg-toolbar-icon-color: #555;
    $lg-icon-color: #555;
    $lg-next-prev-hover-color: #000;
    $lg-toolbar-icon-hover-color: #000;
    $lg-progress-bar-bg: #999;
    $lg-progress-bar-active-bg: $lg-theme-highlight;

    .lg-outer .lg-thumb-outer {
        box-shadow: 0px 0px 6px -3.5px rgba(0, 0, 0, 0.25) inset;
    }
    .lg-sub-html {
        color: #333 !important;
    }
    .lg-sub-html a {
        color: #2f2f2f !important;
    }

    .lg-backdrop {
        background-color: $lg-theme-color;
    }
    .lg-backdrop {
        background-color: $lg-theme-color;
    }

    .lg-thumb-item {
        &.active,
        &:hover {
            border-color: $lg-theme-highlight;
        }
    }

    .lg-progress-bar {
        background-color: $lg-progress-bar-bg;
        .lg-progress {
            background-color: $lg-progress-bar-active-bg;
        }
    }
    .lg-outer {
        .lg-thumb-outer {
            background-color: $lg-thumb-bg;
        }
    }
    .lg-next,
    .lg-prev {
        background-color: $lg-next-prev-bg;
        color: $lg-next-prev-color;
        &:hover {
            color: $lg-next-prev-hover-color;
        }
        &:focus {
            outline: none;
            box-shadow: none;
        }
    }

    .lg-toolbar {
        .lg-icon {
            color: $lg-toolbar-icon-color;
            &:hover {
                color: $lg-toolbar-icon-hover-color;
            }
        }
    }
    .lg-counter {
        color: $lg-icon-color;
    }
    .lg-outer {
        .lg-thumb-item {
            &.active,
            &:hover {
                border-color: $lg-theme-highlight;
            }
        }
    }
}
