.s_carousel_cards_wrapper {

    .s_carousel_cards {
        $-margin-x: calc(var(--#{$prefix}gutter-x) * .5);

        --CarouselControllers-size: 2.5rem;
        --CardBody-padding: #{map-get($spacers, 4)};

        @include media-breakpoint-down(lg) {
            // Remove Extra-height on mobile
            --CardBody-extra-height: 0px !important;
        }

        @include media-breakpoint-down(lg) {
            --CardBody-padding: #{map-get($spacers, 3)};
        }

        @extend %s_carousel_variants;

        // Allow cards to always take the full height of "carousel-item"
        .carousel-item.active, .carousel-item-next, .carousel-item-prev {
            display: flex;
        }

        .s_card {
            --card-img-size-h: inherit;
            --card-spacer-y: var(--CardBody-padding);
            --card-spacer-x: var(--CardBody-padding);
        }
        &:not(.s_carousel_controllers_hidden) .card-body {
            padding-bottom: calc(var(--CarouselControllers-size, 3rem) + 2* var(--CardBody-padding) + var(--CardBody-extra-height));
        }
        .s_carousel_cards_item:only-child .card-body {
            padding-bottom: calc(var(--card-spacer-y) + var(--CardBody-extra-height));
        }
        .o_horizontal_controllers {
            margin-left: $-margin-x;
            margin-right: $-margin-x;
            margin-bottom: var(--CardBody-padding);
        }
        .o_horizontal_controllers_row {
            padding: 0 var(--CardBody-padding);
        }

        @include media-breakpoint-up(lg) {
            &.s_carousel_cards_with_img {

                .o_horizontal_controllers_row {
                    margin: 0 0 0 var(--card-img-size-h);
                }
                &:has(.s_card.flex-lg-row-reverse) .o_horizontal_controllers_row {
                    margin: 0 var(--card-img-size-h) 0 0;
                }
            }
            .o_card_img {
                min-height: 100%;
                aspect-ratio: 1 / var(--card-img-ratio-v);
            }
        }
    }
}