How to create a responsive 3D carousel with keen-slider in React?

I’m trying to build a responsive 3D carousel in React using the keen-slider library. My goal is to have a carousel that rotates along the Y-axis, displaying each slide in a circular layout. As the screen size changes, I want the carousel to adjust its layout to stay centered and maintain the 3D effect (be responsive).

I’ve implemented some code, but the carousel does not maintain the central rotation axis as I resize the screen.

import React from "react"
import { useKeenSlider } from "keen-slider/react"
import "keen-slider/keen-slider.min.css"
import "./styles.css"

const carousel = (slider) => {
  const z = 300
  function rotate() {
    const deg = 360 * slider.track.details.progress
    slider.container.style.transform = `translateZ(-${z}px) rotateY(${-deg}deg)`
  }
  slider.on("created", () => {
    const deg = 360 / slider.slides.length
    slider.slides.forEach((element, idx) => {
      element.style.transform = `rotateY(${deg * idx}deg) translateZ(${z}px)`
    })
    rotate()
  })
  slider.on("detailsChanged", rotate)
}

export default function App() {
  const [sliderRef] = useKeenSlider(
    {
      loop: true,
      selector: ".carousel__cell",
      renderMode: "custom",
      mode: "free-snap",
    },
    [carousel]
  )

  return (
    <div className="wrapper">
      <div className="scene">
        <div className="carousel keen-slider" ref={sliderRef}>
          <div className="carousel__cell number-slide1 ">1</div>
          <div className="carousel__cell number-slide2">2</div>
          <div className="carousel__cell number-slide3">3</div>
          <div className="carousel__cell number-slide4">4</div>
          <div className="carousel__cell number-slide5">5</div>
          <div className="carousel__cell number-slide6">6</div>
        </div>
      </div>
    </div>
  )
}

and i have this CSS code:

  .wrapper {
    display: flex;
    justify-content: center;
    flex: 1;
  }
  .scene {
    width: 100%;
    height: 200px;
    perspective: 1000px;
    position: relative;

    background-color: red;
  }
  .scene .carousel.keen-slider {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: visible;
    transform: translateZ(-288px);
    transform-style: preserve-3d;
  }
  .carousel__cell {
    position: absolute;
    width: 240px;
    left: 10px;
    height: 200px;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
  

I’d like each slide to maintain a fixed aspect ratio and remain responsive, adjusting their size based on screen width without breaking the 3D effect, so i know that i need to change the carousel__cell class, but witch fluid measure i should use?

Thanks.