How can I modify my multi-item carousel to slightly show the next item? (Bootstrap 5)

I have a multi-item carousel in Bootstrap 5.
Four items are visible on screen, and the slide allows to move forward one item at a time.

What I would like to do is to show a bit of the next item on screen (about 10% of it). So the user can see what’s coming. That is, without ceasing to have the four main items centered on screen.

I have seen examples of carousels with one item per slide that can do this. But I haven’t been able to make it with a multi-item carousel.

This is an example of what I have: https://codepen.io/Leticia-Techera/pen/KKjjoGB

let items = document.querySelectorAll('.carousel .carousel-item')

items.forEach((el) => {
    const minPerSlide = 4
    let next = el.nextElementSibling
    for (var i=1; i<minPerSlide; i++) {
        if (!next) {
            // wrap carousel by using first child
            next = items[0]
        }
        let cloneChild = next.cloneNode(true)
        el.appendChild(cloneChild.children[0])
        next = next.nextElementSibling
    }
})

.carousel-control-next, .carousel-control-prev {
    position: unset;
    width: 5%;
}
.buttons-container{
    display: flex;
}
.carousel-control-prev-icon, .carousel-control-next-icon{
    background-color:black;
}

@media (max-width: 767px) {
    .carousel-inner .carousel-item>div {
        display: none;
    }

    .carousel-inner .carousel-item>div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-end.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }

    .carousel-inner .carousel-item-start.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
    transform: translateX(0);
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center my-3">
    <div class="row mx-auto my-auto justify-content-center">
        <div id="recipeCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-md-3">
                        <div class="card ratio ratio-1x1 bg-primary">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card ratio ratio-1x1 bg-secondary">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card ratio ratio-1x1 bg-success">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card ratio ratio-1x1 bg-danger">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card ratio ratio-1x1 bg-warning">
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-md-3">
                        <div class="card ratio ratio-1x1 bg-info">
                        </div>
                    </div>
                </div>
            </div>
            <div class="buttons-container">
                <a class="carousel-control-prev bg-blue w-aut" href="#recipeCarousel" role="button" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                </a>
                <a class="carousel-control-next bg-blue w-aut" href="#recipeCarousel" role="button" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </div>
</div>

Is there a way to modify it to achieve what I want?
Thanks!!