.card-slider-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.card-slider {
  width: 100%;
  height: 100%;
  padding: 0 var(--spacing-wrapper-horizontal);
}

.card-slider .swiper-wrapper {
  display: flex;
}

.card-slider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-right: 20px;
  width: 23%;
  height: auto;
}

/* .card-slider .swiper-slide:nth-last-child(2) {
    margin-right:0px;
} */

.card-slider .swiper-slide:last-child {
  margin-right:0px;
}


.card-slider-spacer {
  width: var(--spacing-wrapper-horizontal) !important;
  min-width: var(--spacing-wrapper-horizontal) !important;
  margin: 0 !important;
  margin: 0;
  flex-shrink: 0;
  pointer-events: none;
}

/* Basic styling for navigation buttons */
.card-slider-container .swiper-button-next,
.card-slider-container .swiper-button-prev {
  color: #000;
}

/*
 * FLUID SLIDER LOGIC
 * Mobile-first: Slider is active on mobile by default
*/

/* On smaller screens, define the width for fluid slider items to make them overflow */
@media (max-width: 1500px) {
    .card-slider-container.is-fluid {
        padding: 0;
    }

    .card-slider-container.is-fluid .swiper-slide {
        width: 30%;
    }
}


/* On desktop (>1024px), Swiper is disabled via JS, so CSS takes over */
@media (min-width: 1501px) {
    .card-slider-container.is-fluid .swiper-wrapper {
        display: flex;
    }

    .card-slider-container.is-fluid .swiper-slide {
        margin-right:20px;
    }

    /* .card-slider-container.is-fluid .swiper-slide:nth-last-child(2) {
        margin-right:0px;
    } */

    .card-slider-container.is-fluid .swiper-slide:not(.card-slider-spacer) {
        width: auto !important; /* Override Swiper's inline style */
        flex: 1;
    }

    .card-slider-container.is-fluid .swiper-button-next,
    .card-slider-container.is-fluid .swiper-button-prev {
        display: none;
    }
}

@media (max-width: 1024px) {

  .card-slider-container.is-fluid .swiper-slide {
      width: 44%;
  }
}

@media (max-width:768px) {
  .card-slider-container.is-fluid .swiper-slide {
      width: 85%;
  }
  .card-slider .swiper-slide { margin-right:15px; }
}