I i have a customized bootstrap carousel, where instead of showing one div i show 3 ( one in middle and 50% of the ones on the sides ).
My problem is my divs have borders and i try to set up a gap between them using display: flex and gap: 10px which works fine, but when the carousel moves the gap vanish and re-appear again, which results in a unpleasant effect. Video
Here is my twig code :

<div id="newProductsCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner" role="listbox">
    {% for product in products %}
    <div class="carousel-item product-item {{ loop.first ? 'active' : '' }}">
      <div class="product_card">...</div>
    </div>
    {% endfor %}
  </div>
  <button class="carousel-control-prev"  type="button" data-bs-target="#newProductsCarousel" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#newProductsCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

Sass code

//Mobile
.newProductsCarousel {
  .carousel {
    overflow: hidden;

    &-item {
      .product_card:first-child,
      .product_card:last-child {
        display: none;
      }

      .product_card {
        height: 340px;
        text-align: center;
      }
    }
  }
}
// Desktop
.newProductsCarousel {
    $fragment_width: 25%;

    .carousel-item-next:not(.carousel-item-start),
    .carousel-item-end.active {
      -webkit-transform: translateX(33%);
      transform: translateX(33%);
    }
    .carousel-item-prev:not(.carousel-item-end),
    .carousel-item-start.active {
     -webkit-transform: translateX(-33%);
      transform: translateX(-33%);
    }

    .carousel {
      &-inner {
        width: (100% - 2 * $fragment_width) * 3;
        left: 3 * $fragment_width - 100%;
      }

      &-item {
        &.active {
          display: flex;
          column-gap: 20px;
        }

        .product_card {
          display: block !important;
          height: 340px;
          width: 33.33333333%;
          float: left;
          text-align: center;
          position: relative;
          padding: 30px 0;
        }
      }
    }
  }

JS Code :

    $('.carousel-item.product-item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
    }).each(function () {
        var prev = $(this).prev();
        if (!prev.length) {
            prev = $(this).siblings(':last');
        }
        prev.children(':nth-last-child(2)').clone().prependTo($(this));
    });

I tried giving the display: flex; to all carousel-item, but it didnt work, it broke my carousel from moving.
I also tried giving the maring to the middle div, but it resulted in the same effect.