[is="light-box"] {
    position: relative;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    z-index: 0;

    >img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 1;
        cursor: pointer;
        border-radius: .625rem;
    }

    dialog {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        overflow: visible;
        background: none;
        width: fit-content;
        height: fit-content;
        min-width: 0;
        width: 65%;
        height: 85%;

        &:not(:open) {
            display: none;
        }

        .img-wrapper {
            position: relative;
            display: grid;
            align-items: center;
            justify-content: center;
            max-height: 100%;
            max-width: 100%;
            border-radius: .625rem;
            overflow: hidden;

            img {
                display: inline-block;
                flex: 1;
                min-height: 0;
                min-width: 0;
                flex-basis: 0px;
                max-height: 85vh;
                max-width: 65vw;
            }

            .copyright:empty {
                display: none;
            }
        }

        button {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            height: 3.5rem;
            transform: translateY(-50%);
            aspect-ratio: 1;
            border-radius: 100%;
            margin: 1rem;
            background-color: white;
            border: none;
            cursor: pointer;
            outline: none;

            &::after {
                content: '';
                background-color: var(--grey);
                mask-image: url(/carousel-arrow.svg);
                height: 50%;
                aspect-ratio: 1;
            }

            &.left {
                right: 100%;

                &::after {
                    transform: scaleX(-100%);
                }
            }

            &.right {
                left: 100%;
            }

            &:hover {
                background-color: var(--red);

                &::after {
                    background-color: white;
                }
            }
        }

        &::backdrop {
            background-color: rgba(0, 0, 0, .5);
        }
    }
}