/* ==========================================================================
   SLIDERS — gallerySwiper, fleetSwiper, features strip
   ========================================================================== */
:root {
  --container-max: calc(var(--global-content-width) - var(--global-content-edge-padding) * 2);
  --container-padding: var(--global-content-edge-padding);
  --container: min(
    calc(100vw - 2 * var(--container-padding)),
    var(--container-max)
  );
}

.gallerySwiper {
    padding-bottom: 24px;
}

/* .swiper-slide { */
/*   width: 573px; */
/* } */

.swiper-slide {
  width: 327px;
}

@media (min-width: 768px) {
  .swiper-slide {
    width: 573px
  }
}

.gallerySwiper .swiper-slide img { 
    object-fit: cover; 
    width: 100%;
    display: block;
    border-radius: 24px;
}

/* Arrows */
.gallerySwiper-outer .swiper-button-prev,
.gallerySwiper-outer .swiper-button-next {
    width: 52px;
    height: 52px;
    background: #040404;
    border-radius: 50%;
    color: #fff;
    /* top: -60px; */
    z-index: 100;
    /* transform: translateX(13px); */
}

.gallerySwiper {
  /* overflow: visible; */
  /* width: var(--global-content-width); */
  
  /* width: calc( */
  /*   50vw  */
  /*   + var(--global-content-width) / 2 */
  /*   - var(--global-content-edge-padding) */
  /* ) !important; */
  /* margin-left: calc( */
  /*   50%  */
  /*   - var(--global-content-width) / 2  */
  /*   + var(--global-content-edge-padding) */
  /* ) !important; */
    width: calc(
    50vw + var(--container) / 2
  );

  margin-left: calc(
    50% - var(--container) / 2
  );

}

.gallerySwiper-outer .swiper-button-next {
  right: 0;
  left: auto;
}


.gallerySwiper-outer .swiper-button-prev {
  right: 74px;
  left: auto;
 }

.gallerySwiper-outer .swiper-button-next,
.gallerySwiper-outer .swiper-button-prev {
   top: 0; 
   transform: translateY(-145%);
}

.gallerySwiper-outer .swiper-button-prev::after,
.gallerySwiper-outer .swiper-button-next::after {
    font-size: 20px;
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
    color: red;
}


.gallerySwiper-outer .swiper-scrollbar {
    height: 4px;
    left: 0;
}

.gallerySwiper-outer .swiper-scrollbar-drag {
    background: red;
}


@media (max-width: 1439px) {
    .gallerySwiper-outer .swiper-button-prev,
    .gallerySwiper-outer .swiper-button-next {
        display: none;
    }
}


/* /* Mobile 375px */ */
/* @media (max-width: 375px) { */
/*     .gallerySwiper-outer .swiper-wrapper { */
/*         display: flex; */
/*         gap: 12px; */
/*     } */
/**/
/*     .gallerySwiper-outer .swiper-slide { */
/*         width: 327px; */
/*     } */
/**/
/*     .gallerySwiper-outer .swiper-slide img { */
/*         /* width: 327px; */ */
/*         height: 218px; */
/*         border-radius: 28px; */
/*     } */
/**/
/*     .gallerySwiper-outer .swiper-button-prev, */
/*     .gallerySwiper-outer .swiper-button-next { */
/*         display: none; */
/*     } */
/**/
/*     .gallerySwiper-outer .swiper-scrollbar { */
/*         margin: 0 16px; */
/*     } */
/* } */
/**/



.gallerySwiper .swiper-slide img {
    width: 100%;
    height: auto;        /* let image scale naturally */
    display: block;
    border-radius: 24px;
    object-fit: unset;   /* no more cropping */
}

/* Mobile 375px — remove the fixed height override too */
@media (max-width: 375px) {
    .gallerySwiper-outer .swiper-slide img {
        height: auto;    /* was 218px */
        border-radius: 28px;
    }
}