
modal-container.captioned {
    width: 100vw;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 75vw 25vw;
}

modal-container.captioned .lightbox-button {
    display: none;
}

modal-container figcaption {
    /* position: absolute; */
    right: -25vw;
    top: 0;
    bottom: 0;
    /* width: 25vw; */
    background: black;
    color: #efefef;
    padding: 3rem 1.2rem 1rem;
    z-index: -1;
    grid-column: 2 / span 1;
    height: 100vh;
    box-sizing: border-box;
}
modal-container.lightbox .modal-body {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: red; */
    width: 100%;
    height: 100%;
}

modal-container.captioned.lightbox img{
    width: 65vw;
    object-fit: contain;
    object-position: center;
    background-color: transparent;
    display: block;
    width: 100%;
    height: 100%;
}

modal-container.captioned modal-box {
    box-sizing: border-box;
    /* width: 65vw; */
    background: transparent;
    grid-column: 1 / span 1;
    height: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: relative; */
}

modal-container > button.modal-close-button {
    height: 3rem;
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}