Как центрировать карты в Keen-Slider

Question

Как центрировать карточки в кипе-слайдере, если они меньше ширины всего слайдера

Я пытался добавить опцию происхождения в настройки слайдов, но с этой настройкой все карты перемещаются в центр, а слева появляется большое пространство, даже если карты больше, чем ширина слайдера.

Карусельный компонент

      export const Carousel: FC<Props> = ({
  children,
  className,
  carouselOptions,
}) => {
  const [carouselRef] = useKeenSlider<HTMLDivElement>({
    ...carouselOptions,
  });

  return (
    <div
      ref={carouselRef}
      className={classNames("keen-slider relative w-auto", className)}
    >
      {children}
    </div>
  );
};

Компонент, использующий карусель:

          <Carousel
      carouselOptions={{
        slides: { perView: "auto", spacing: 20 },
      }}
      className="relative h-[375px] mb-[30px] md:mb-[30px] 2xl:mb-[45px]"
    >
      {isLoading ? (
        <Spinner />
      ) : (
        data.data?.map((item, index) => (
          <Place key={item.object_id} location={item} />
        ))
      )}
    </Carousel>

И поместите компонент

         <Card
     slideWrapperClassName={classNames(
      "min-w-[325px] max-w-[325px] h-[375px] py-[15px] drop- 
      shadow-base first-of-type:ml-[20px]",
      "2xl:first-of-type:ml-[0]"
   )}
  slideClassName="flex flex-col w-full h-full bg-white-500 rounded-xl border border-solid border-gray-500"
>
  <div className="w-full h-[220px] absolute left-0 top-0 rounded-xl overflow-hidden">
    <Image
      src={location.mainPicture ?? Img}
      fill
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      alt="card-image"
    />
  </div>
  <div className="p-[15px] mt-[220px]">
    <div className="w-[80%]">
      <h6 className="font-bold h-[48px] line-clamp-2" title={location.name}>
        {location.name}
      </h6>
      <p
        className="line-clamp-1"
        title={`${location.postalcode} ${location.city}`}
      >{`${location.postalcode} ${location.city}`}</p>
      <p className="line-clamp-1" title={location.address}>
        {location.address}
      </p>
    </div>
  </div>
</Card>