full-screen-image-gallery {

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1999999999;
    overflow: hidden;

    background-color: #000000cc;
    backdrop-filter: blur(20px);
    color: white;
    text-shadow: 0 0 3px black;

    & > * {
        height: 100vh;
        width: 100%;
        object-fit: contain;
    }

    & img {
        &:not([loaded]) {
            background-image: url("../../images/loader.svg");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 20vw 20vw;
        }

    }

    &::part(root) {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr auto;
    }

    &::part(left) {
        grid-row: 1 / span 3;
        grid-column: 1;
        border: none;
        outline: none;
        cursor: pointer;
        box-sizing: border-box;
        margin: 10px;
        font: var(--fa-font-solid);
        font-size: 2rem;
        place-self: center;
        z-index: 2;
        &::after {
            content: "\f137"
        }
    }

    &::part(right) {
        grid-row: 1 / span 3;
        grid-column: 3;
        cursor: pointer;
        box-sizing: border-box;
        margin: 10px;
        font: var(--fa-font-solid);
        font-size: 2rem;
        place-self: center;
        z-index: 2;
        &::after {
            content: "\f138"
        }
    }

    &::part(close) {
        grid-row: 1;
        grid-column: 3;
        cursor: pointer;
        box-sizing: border-box;
        margin: 10px;
        font: var(--fa-font-solid);
        font-size: 2rem;
        place-self: center;
        z-index: 2;
        &::after {
            content: "\f057"
        }
    }


    &::part(content) {
        grid-row: 1 / span 3;
        grid-column: 1 / span 3;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: start;
        align-content: start;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: none;

        scroll-snap-type: x mandatory;
    }

    &::part(img) {
        display: grid;
        align-items: stretch;
        justify-items: stretch;
        justify-content: stretch;
        align-content: stretch;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
        scrollbar-width: none;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    & > *:first-child {
        scroll-snap-align: start;
    }

    & > *:last-child {
        scroll-snap-align: end;
    }

    & > [data-state=grabbing] {
        cursor: grabbing;
    }

    
}