SwiperJs: I’m displaying groups of 2 slides, they should be centered but I can’t even achieve it restraining the slides width

I am working with SwiperJS to create a slider that displays two slides per group, centered within the slider’s container. My current implementation results in the slides expanding to fill the entire available width of the container, which is not what I want. Ideally, I’d like the slides to occupy only part of the container’s width while remaining centered.

CodeSandbox Example:

Please refer to my CodeSandbox example here for a live demo of the issue.

Attempted Solutions:

  • I tried using flex, justify-content: center, and margin-inline: auto with width: fit-content for the slides.
  • I attempted to limit the swiper-container width.
  • None of these approaches have corrected the issue, suggesting that I might be missing something obvious. This should be simpler.

Here is what the current layout looks like:
enter image description here

Here is what I want to achieve (desired layout):
enter image description here

Note: the prev-arrow is not relevant, I’m just focused in achieve the centering.

Relavant code:

Javascript

$.getScript(
      "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js",
      function () {
        new Swiper(".customSwiper", {
          grabCursor: true,
          slidesPerView: 2,
          centeredSlides: false,
          spaceBetween: 10,
          loop: false,  
          slidesPerGroup: 2,  
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      }
    );

CSS:

/* swiper */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  max-width: unset !important;
}
.swiper-container {
  width: 100vw;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #FFF;
  max-width: unset !important;
}
/* card being displayed */
.card {
  border-radius: 25px;
  background: #F8F8F8;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  max-width: 30em;
  width: fit-content;
  column-gap: 24px;
  }

Question:
How can I adjust my SwiperJS configuration or CSS to prevent the slides from stretching to fill the entire container width and instead center them as I’ve illustrated? Are there specific CSS properties or Swiper settings that could correct this behavior?