body.lightbox_open { overflow: hidden!important; }

#lightbox { position: fixed; z-index: 9999999; overflow: hidden; }
#lightbox, #lightbox .lightbox_background { top: 0; bottom: 0; left: 0; right: 0; }
#lightbox .lightbox_background { position: absolute; background: rgba(var(--lightbox-background-colour), 75% )!important; }

#lightbox img {
    z-index: 1; position: absolute; top: 50vh;
    max-height: 84vh; max-width: 84vw;
    transition: all 1s;

    border-radius: var(--lightbox-image-border-radius);
    border: var(--lightbox-image-border-size) solid rgb(var(--lightbox-image-border-colour));
}
#lightbox img[data-current] { z-index: 2; }
#lightbox img:not(:first-child:last-child):not([data-current]:last-child) { cursor: pointer; }

#lightbox img:not([data-current]):not([data-next]):not([data-prev]) { left: -50vw; transform: translate( calc( -100% ), -50% ); }
#lightbox img[data-prev] { left: 0vw; transform: translate( calc( -100% + 5vw ), -50% ); }
#lightbox img[data-current] { left: 50vw; transform: translate( calc( -50% ), -50% ); }
#lightbox img[data-next] { left: 100vw; transform: translate( calc( 0% - 5vw ), -50% ); }
#lightbox img[data-next] ~ img:not([data-current]):not([data-next]):not([data-prev]) { left: 150vw; transform: translate( calc( 100% ), -50% ); }

#lightbox img[data-prev]:hover { transform: translate( calc( -100% + 5vw + 2vw ), -50% ); }
#lightbox img[data-next]:hover { transform: translate( calc( 0% - 5vw - 2vw ), -50% ); }