image-carousel {
    
    display: inline-block;

    &::part(root) {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto 1fr auto;
        align-items: center;
    }

    &::part(left) {
        grid-row: 2;
        grid-column: 1;
        border: none;
        outline: none;
        cursor: pointer;
        box-sizing: border-box;
        margin: 10px;
        font: var(--fa-font-solid);
        font-size: 2rem;
        color: white;
        text-shadow: 0 0 3px black;
        z-index: 2;
        &::after {
            content: "\f137"
        }
    }

    &::part(right) {
        grid-row: 2;
        grid-column: 3;
        cursor: pointer;
        box-sizing: border-box;
        margin: 10px;
        font: var(--fa-font-solid);
        font-size: 2rem;
        z-index: 2;
        color: white;
        text-shadow: 0 0 3px black;
        &::after {
            content: "\f138"
        }
    }

    &::part(content) {
        grid-row: 1 / span 3;
        grid-column: 1 / span 3;
        color: unset;
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
        align-content: center;
        justify-content: space-between;
        padding: 10px;
        margin: 10px;
        border-radius: 10px;
        align-items: center;
        justify-items: stretch;
        overflow-y: hidden;
        overflow-x: auto;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    &::part(img) {
        display: inline-block;
        padding: 5px;
        scroll-snap-align: center;
    }

    & img {
        max-height: 20vh;
        margin: 20px;
        box-shadow: 0 0 20px 1px black;
        border: solid 1px white;
        &:hover {
            box-shadow: 0 0 20px 1px blue;
        }
    }
}