How to Maintain a Consistent Gap Between Items in React Slider (Carousel) Across Different Screen Sizes?

Question

I'm working on a React project using React Slick for a carousel component. I need to ensure that the gap between the items in the carousel remains consistent across all screen sizes.

The requirement is that the items should not be fixed in number so that the responsiveness of react slick in the setting is also not the solution of it.

I add this in CSS:

/* Ensure each slick-slide has the correct spacing */
  .slick-slide {
    margin: 0 10px; /* Add a 15px margin on both sides of each slick-slide */
    box-sizing: border-box; /* Ensures that the margin doesn't affect the width of the items */
  }

  /* Adjust the slick-list to prevent overflow caused by the margin */
  .slick-list {
    overflow: hidden; /* Ensures no overflow beyond the carousel bounds */
  }

  /* Ensure the track uses the flexbox layout */
  .slick-track {
    display: flex;
    gap: 30px; /* This makes sure there's a 10px gap between items */
  }

this but when I resized the screen the gap disappeared and items overlapped. Items with gap:

Items without gap when screen size is small and items are overlapped:

Carousel - using REACT SLICK - slider.

I tried the following Code:

/* Ensure each slick-slide has the correct spacing */
  .slick-slide {
    margin: 0 10px; /* Add a 15px margin on both sides of each slick-slide */
    box-sizing: border-box; /* Ensures that the margin doesn't affect the width of the items */
  }

  /* Adjust the slick-list to prevent overflow caused by the margin */
  .slick-list {
    overflow: hidden; /* Ensures no overflow beyond the carousel bounds */
  }

  /* Ensure the track uses the flexbox layout */
  .slick-track {
    display: flex;
    gap: 30px; /* This makes sure there's a 10px gap between items */
  }

but it does not work

I expect the solution is that the gap should remain consistent regardless of screen size.