.scene-preview {
    display: grid;
    grid-template-rows: minmax(19rem, auto) 1fr
}

.transition {
    transition: all .2s ease-in-out;
}

.slide-l {
    transform: translateX(-120%);
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}


/* LIGHTBOX */
.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: zoom-out;
    padding: 3rem;
    background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
    display: block;
}

.lightbox span {
    /* Full width and height */
    display: block;
    width: 100%;
    height: 100%;

    /* Size and position background image */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.lightbox-trigger img {
    cursor: zoom-in;
}