/* =========================================
   HORIZONTAL IMAGE SLIDER

   Desktop: 4 images
   Tablet:  3 images
   Mobile:  2 images
========================================= */

.image-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.image-slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.6s ease;
}


/* =========================================
   DESKTOP
   4 images = 3 Bootstrap columns each
========================================= */

.image-slide {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 5px;
  box-sizing: border-box;
}

.image-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}


/* =========================================
   CONTROLS
========================================= */

.slider-control {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 45px;
  height: 45px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  background: rgba(39, 93, 56, 0.75);
  color: #fff;
  font-size: 32px;
  line-height: 35px;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.slider-control:hover,
.slider-control:focus {
  background: rgba(0, 0, 0, 0.85);
}

.slider-control:disabled {
  opacity: 0.35;
  cursor: default;
}

.slider-prev {
  left: 15px;
}

.slider-next {
  right: 15px;
}


/* =========================================
   TABLET
   3 images = 4 Bootstrap columns each
========================================= */

@media (max-width: 991.98px) {

  .image-slide {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

}


/* =========================================
   MOBILE
   2 images = 6 Bootstrap columns each
========================================= */

@media (max-width: 575.98px) {

  .image-slide {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .image-slide img {
    height: 180px;
  }

}