image-gallery {
    display: grid !important;
    box-sizing: border-box;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr 20%;
    position: relative;

    max-height: 90vh;

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

    & * {
        box-sizing: border-box;
    }

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

    }

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

    &::part(canvas) {
        grid-row: 2;
        grid-column: 2;
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: none;
        box-sizing: border-box;
        align-items: stretch;
        justify-items: start;
        justify-content: start;
        scroll-snap-type: x mandatory;
    }
    &::part(container) {
        display: contents;
        text-align: center;
        box-sizing: border-box;
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    &::part(child) {
        grid-row: 1;
        padding: 10px;
        min-width: 100%;
        min-height: 100%;
        display: flex;
        justify-content: center;
        box-sizing: border-box;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    &::part(indicator) {
        grid-row: 3;
        grid-column: 2;
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: none;
        box-sizing: border-box;
        align-items: stretch;
        justify-items: start;
        justify-content: start;
        background-color: transparent;
    }

    &::part(thumbnail) {
        grid-row: 1;
        cursor: pointer;
        box-sizing: border-box;
        border: solid 5px transparent;
        background-color: transparent;
    }

    &::part(active) {
        border-color: var(--accent-color, gray);
        background-color: var(--accent-color, gray);
    }

    &::part(thumbnail-image) {
        box-sizing: border-box;
        max-height: 150px;
        text-align: center;
    }
}