.carousel {
    container-type: inline-size;
    container-name: carousel;
    display: grid;
    width: 100%;

    > *:first-child {
        --gap: var(--wp--preset--spacing--x-small);

        &[data-slidewidth="25"] {
            --slide-width: calc(25% - var(--gap));
        }

        &[data-slidewidth="50"] {
            --slide-width: calc(50% - var(--gap));
        }

        &[data-slidewidth="100"] {
            --slide-width: 100%;
        }

        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--slide-width, 40%);
        gap: var(--gap);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overflow-y: hidden;
        overflow-x: auto;

        @container carousel (width < 1100px) {
            grid-auto-columns: 50%;

            &[data-slidewidth="100"] {
                grid-auto-columns: 100%;
            }
        }

        @container carousel (width < 820px) {
            grid-auto-columns: 100%;
        }

        > * {
            /* transition: opacity var(--transition--timing-300) ease-in-out; */
            scroll-snap-align: center;
            margin-block-start: 0;
            contain: paint;
            width: 100%;

            /* opacity: 0.4;

            &.active {
                opacity: 1;
            }
            */

            /* &:nth-child(odd) {
                background-color: lightseagreen;
            } */
        }
    }

    > .block-carousel-navigation {
        margin-block-start: var(--wp--preset--spacing--x-small);
        /* margin-block-start: 0; */
        padding: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8em;

        &[data-shownav="true"] {
            display: none;
        }

        > * {
            transition: background-color var(--transition--timing-300) ease-in-out;
            background-color: var(--wp--preset--color--primary-orange-400);
            transition:
                width var(--transition--timing-300) ease,
                border-radius var(--transition--timing-300) ease;
            border-radius: 50%;
            border: none;
            height: 20px;
            width: 20px;
            padding: 0;
            cursor: pointer;

            @container carousel (width < 1100px) {
                width: 18px;
                height: 18px;
            }

            @container carousel (width < 820px) {
                width: 16px;
                height: 16px;
            }

            &:not(.active) {
                aspect-ratio: 1;
            }

            &.active {
                background-color: var(--wp--preset--color--primary-orange-900);
                border-radius: 12px;
                width: 40px;
            }
        }
    }
}