.wp-block-gallery.has-nested-images.is-display-type-carousel {
    /* to display all images in a single row */
    display: flex;
    flex-direction: row;
    align-items: unset;
    width: 100%;
    gap: var(--carousel-gap, 1.2rem);

    /* for the horizontal scrolling */
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    anchor-name: --carousel;

    & + * {
        margin-top: 40px;
    }

    > .wp-block-image {
        scroll-snap-align: center;
        display: block;
        /* Mobile first - use mobile items per view */
        width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        min-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        max-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        flex-shrink: 0;
        flex-grow: 0;
        box-sizing: border-box;
        height: 20rem;
    }

    /* Desktop styles - apply at 768px and above */
    @media (min-width: 768px) {
        > .wp-block-image {
            width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            min-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            max-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
        }
    }

    /* for the left/right arrows, which are actually siblings of the carousel */
    &::scroll-button(*) {
        position: fixed;
        position-anchor: --carousel;
        display: block;
        width: 2rem;
        aspect-ratio: 1;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.5rem;
    }

    &::scroll-button(inline-start) {
        position-area: inline-start center;
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(inline-end) {
        position-area: inline-end center;
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-start) {
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-end) {
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(*):disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    scroll-marker-group: after;

    /* Note: this is actually a sibling of the carousel */
    &::scroll-marker-group {
        display: grid;
        grid-auto-columns: 10px;
        grid-auto-flow: column;
        gap: 10px;
        justify-content: center;
    }

    /* This will add one dot for each item within the scroll marker group */
    > figure::scroll-marker {
        content: " ";
        cursor: pointer;
        aspect-ratio: 1;
        border: 1px solid #ccc;
        border-radius: 50%;
        background-color: #ccc;
        text-decoration: none;
    }

    > figure::scroll-marker:target-current {
        content: " ";
        border: 1px solid #333;
        border-radius: 50%;
        background-color: #333;
    }
}

/* Query Loop carousel styles */
.wp-block-post-template.is-display-type-carousel {
    /* to display all posts in a single row */
    display: flex;
    flex-direction: row;
    align-items: unset;
    width: calc(
        100% + var(--wp--style--root--padding-left, 0) +
            var(--wp--style--root--padding-right, 0)
    );
    max-width: calc(
        100% + var(--wp--style--root--padding-left, 0) +
            var(--wp--style--root--padding-right, 0)
    );
    gap: 0;

    /* for the horizontal scrolling */
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    anchor-name: --carousel;
    margin-left: calc(var(--wp--style--root--padding-left, 0) * -1);
    margin-right: calc(var(--wp--style--root--padding-right, 0) * -1);

    & + * {
        margin-top: 40px;
    }

    > li {
        padding-left: var(--wp--style--root--padding-left, 0);
        scroll-snap-align: start;
        display: block;
        /* Mobile first - use mobile items per view */
        width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        min-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        max-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        flex-shrink: 0;
        flex-grow: 0;
        box-sizing: border-box;
    }
    > li:last-child {
        margin-right: var(--wp--style--root--padding-right, 0);
    }

    /* Desktop styles - apply at 768px and above */
    @media (min-width: 768px) {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        gap: var(--carousel-gap, 1.2rem);

        > li {
            padding-left: 0;
            width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            min-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            max-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
        }
        > li:last-child {
            margin-right: 0;
        }
    }

    /* for the left/right arrows, which are actually siblings of the carousel */
    &::scroll-button(*) {
        position: fixed;
        position-anchor: --carousel;
        display: block;
        width: 2rem;
        aspect-ratio: 1;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.5rem;
    }

    &::scroll-button(inline-start) {
        position-area: inline-start center;
        content: "←" / attr(data-previous);
    }

    &::scroll-button(inline-end) {
        position-area: inline-end center;
        content: "→" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-start) {
        content: "→" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-end) {
        content: "←" / attr(data-previous);
    }

    &::scroll-button(*):disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    scroll-marker-group: after;

    /* Note: this is actually a sibling of the carousel */
    &::scroll-marker-group {
        display: grid;
        grid-auto-columns: 10px;
        grid-auto-flow: column;
        gap: 10px;
        justify-content: center;
    }

    /* This will add one dot for each item within the scroll marker group */
    > li::scroll-marker {
        content: " ";
        cursor: pointer;
        aspect-ratio: 1;
        border: 1px solid #ccc;
        border-radius: 50%;
        background-color: #ccc;
        text-decoration: none;
    }

    > li::scroll-marker:target-current {
        content: " ";
        border: 1px solid #333;
        border-radius: 50%;
        background-color: #333;
    }
}

/* Fallback for Query Loop wrapper div */
.wp-block-query.is-display-type-carousel {
    /* to display all posts in a single row */
    display: flex;
    flex-direction: row;
    align-items: unset;
    width: 100%;
    gap: var(--carousel-gap, 1.2rem);

    /* for the horizontal scrolling */
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    anchor-name: --carousel;

    & + * {
        margin-top: 40px;
    }

    > * {
        scroll-snap-align: start;
        display: block;
        /* Mobile first - use mobile items per view */
        width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        min-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        max-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        flex-shrink: 0;
        flex-grow: 0;
        box-sizing: border-box;
    }

    /* Desktop styles - apply at 768px and above */
    @media (min-width: 768px) {
        > * {
            width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            min-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            max-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
        }
    }

    /* for the left/right arrows, which are actually siblings of the carousel */
    &::scroll-button(*) {
        position: fixed;
        position-anchor: --carousel;
        display: block;
        width: 2rem;
        aspect-ratio: 1;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.5rem;
    }

    &::scroll-button(inline-start) {
        position-area: inline-start center;
        content: "←" / attr(data-previous);
    }

    &::scroll-button(inline-end) {
        position-area: inline-end center;
        content: "→" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-start) {
        content: "→" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-end) {
        content: "←" / attr(data-previous);
    }

    &::scroll-button(*):disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    scroll-marker-group: after;

    /* Note: this is actually a sibling of the carousel */
    &::scroll-marker-group {
        display: grid;
        grid-auto-columns: 20px;
        grid-auto-flow: column;
        gap: 20px;
        justify-content: center;
    }

    /* This will add one dot for each item within the scroll marker group */
    > *::scroll-marker {
        content: " ";
        cursor: pointer;
        aspect-ratio: 1;
        border: 1px solid #ccc;
        border-radius: 50%;
        background-color: #ccc;
        text-decoration: none;
    }

    > *::scroll-marker:target-current {
        content: " ";
        border: 1px solid #333;
        border-radius: 50%;
        background-color: #333;
    }
}

.wp-block-css-carousel-block-carousel.is-display-type-carousel {
    /* to display all items in a single row */
    display: flex;
    flex-direction: row;
    align-items: unset;
    width: 100%;
    gap: var(--carousel-gap, 1.2rem);

    /* for the horizontal scrolling */
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    anchor-name: --carousel;

    & + * {
        margin-top: 40px;
    }

    > * {
        scroll-snap-align: center;
        display: block;
        /* Mobile first - use mobile items per view */
        width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        min-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        max-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        flex-shrink: 0;
        flex-grow: 0;
        box-sizing: border-box;
    }

    /* Desktop styles - apply at 768px and above */
    @media (min-width: 768px) {
        > * {
            width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            min-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            max-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
        }
    }

    /* for the left/right arrows, which are actually siblings of the carousel */
    &::scroll-button(*) {
        position: fixed;
        position-anchor: --carousel;
        display: block;
        width: 2rem;
        aspect-ratio: 1;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.5rem;
    }

    &::scroll-button(inline-start) {
        position-area: inline-start center;
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(inline-end) {
        position-area: inline-end center;
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-start) {
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-end) {
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(*):disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    scroll-marker-group: after;

    /* Note: this is actually a sibling of the carousel */
    &::scroll-marker-group {
        display: grid;
        grid-auto-columns: 10px;
        grid-auto-flow: column;
        gap: 10px;
        justify-content: center;
    }

    /* This will add one dot for each item within the scroll marker group */
    > *::scroll-marker {
        content: " ";
        cursor: pointer;
        aspect-ratio: 1;
        border: 1px solid #ccc;
        border-radius: 50%;
        background-color: #ccc;
        text-decoration: none;
    }

    > *::scroll-marker:target-current {
        content: " ";
        border: 1px solid #333;
        border-radius: 50%;
        background-color: #333;
    }
}

/* Grid block carousel styles */
.wp-block-grid.is-display-type-carousel {
    /* to display all grid items in a single row */
    display: flex;
    flex-direction: row;
    align-items: unset;
    width: 100%;
    gap: var(--carousel-gap, 1.2rem);

    /* for the horizontal scrolling */
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    anchor-name: --carousel;

    & + * {
        margin-top: 40px;
    }

    > * {
        scroll-snap-align: center;
        display: block;
        /* Mobile first - use mobile items per view */
        width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        min-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        max-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        flex-shrink: 0;
        flex-grow: 0;
        box-sizing: border-box;
    }

    /* Desktop styles - apply at 768px and above */
    @media (min-width: 768px) {
        > * {
            width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            min-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            max-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
        }
    }

    /* for the left/right arrows, which are actually siblings of the carousel */
    &::scroll-button(*) {
        position: fixed;
        position-anchor: --carousel;
        display: block;
        width: 2rem;
        aspect-ratio: 1;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.5rem;
    }

    &::scroll-button(inline-start) {
        position-area: inline-start center;
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(inline-end) {
        position-area: inline-end center;
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-start) {
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-end) {
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(*):disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    scroll-marker-group: after;

    /* Note: this is actually a sibling of the carousel */
    &::scroll-marker-group {
        display: grid;
        grid-auto-columns: 10px;
        grid-auto-flow: column;
        gap: 10px;
        justify-content: center;
    }

    /* This will add one dot for each item within the scroll marker group */
    > *::scroll-marker {
        content: " ";
        cursor: pointer;
        aspect-ratio: 1;
        border: 1px solid #ccc;
        border-radius: 50%;
        background-color: #ccc;
        text-decoration: none;
    }

    > *::scroll-marker:target-current {
        content: " ";
        border: 1px solid #333;
        border-radius: 50%;
        background-color: #333;
    }
}

.wp-block-css-carousel-block-carousel.is-display-type-carousel {
    /* to display all items in a single row */
    display: flex;
    flex-direction: row;
    align-items: unset;
    width: 100%;
    gap: var(--carousel-gap, 1.2rem);

    /* for the horizontal scrolling */
    overflow-x: auto;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;

    anchor-name: --carousel;

    & + * {
        margin-top: 40px;
    }

    > * {
        scroll-snap-align: center;
        display: block;
        /* Mobile first - use mobile items per view */
        width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        min-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        max-width: calc(
            (
                    100% -
                        (
                            var(
                                    --items-per-view-mobile,
                                    var(--items-per-view, 1)
                                ) - 1
                        ) * var(--carousel-gap, 1.2rem)
                ) / var(--items-per-view-mobile, var(--items-per-view, 1))
        );
        flex-shrink: 0;
        flex-grow: 0;
        box-sizing: border-box;
    }

    /* Desktop styles - apply at 768px and above */
    @media (min-width: 768px) {
        > * {
            width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            min-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
            max-width: calc(
                (
                        100% - (var(--items-per-view, 1) - 1) *
                            var(--carousel-gap, 1.2rem)
                    ) / var(--items-per-view, 1)
            );
        }
    }

    /* for the left/right arrows, which are actually siblings of the carousel */
    &::scroll-button(*) {
        position: fixed;
        position-anchor: --carousel;
        display: block;
        width: 2rem;
        aspect-ratio: 1;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.5rem;
    }

    &::scroll-button(inline-start) {
        position-area: inline-start center;
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(inline-end) {
        position-area: inline-end center;
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-start) {
        content: "➡️" / attr(data-next);
    }

    [dir="rtl"] &::scroll-button(inline-end) {
        content: "⬅️" / attr(data-previous);
    }

    &::scroll-button(*):disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    scroll-marker-group: after;

    /* Note: this is actually a sibling of the carousel */
    &::scroll-marker-group {
        display: grid;
        grid-auto-columns: 10px;
        grid-auto-flow: column;
        gap: 10px;
        justify-content: center;
    }

    /* This will add one dot for each item within the scroll marker group */
    > *::scroll-marker {
        content: " ";
        cursor: pointer;
        aspect-ratio: 1;
        border: 1px solid #ccc;
        border-radius: 50%;
        background-color: #ccc;
        text-decoration: none;
    }

    > *::scroll-marker:target-current {
        content: " ";
        border: 1px solid #333;
        border-radius: 50%;
        background-color: #333;
    }
}