/* (A) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: content-box;
}

/* (B) SHARED */
.hide {
  visibility: hidden;
}

.sImg,
.sCaption {
  width: 100%;
}

.sSlide,
.sLeft,
.sRight {
  display: flex;
}

/* (C) CONTAINER */
.sSlide {
  flex-wrap: nowrap;
  position: relative;
  max-width: 450px;
  background-color: #2c2c2c;
}

/* (D) IMAGE */
.sImg {
  height: 338px;
  object-fit: cover;
  /* fill, contain, scale-down */
}

/* (E) CAPTION */
.sCaption {
  padding: 10px;
  color: #fff;
  background: #000;
  max-width: 100px;
  word-wrap: break-word;
}

/* (F) CONTROLS */
/* (F1) LEFT/RIGHT BUTTONS */
.sLeft,
.sRight {
  align-items: center;
  position: relative;
  top: 0;
  z-index: 9;
  height: 100%;
  padding: 0 0px;
  font-size: 2em;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.sLeft {
  left: 0;
}

.sRight {
  right: 0;
}

/* (F2) SHOW ONLY ON HOVER */
.sLeft,
.sRight {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

.sSlide:hover .sLeft,
.sSlide:hover .sRight {
  visibility: visible;
  opacity: 1;
}

/*centering rotating pictures*/
.slideshow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0%;
  /* Adjust spacing between containers */
}

.slideshow {
  width: 450px;
  /* Adjust as needed */
  height: 338px;
  /* Adjust as needed */
  border: 1px solid #000;
  /* Optional: Adds a border to each container */
}

/* Responsive adjustments */
/*small tablet styles*/
@media only screen and (min-width: 300px) {
  .sSlide {
    max-width: 15%;
  }

  .sImg {
    height: auto;
  }

  .slideshow {
    width: 15%;
    max-width: 15%;
  }
}

/* large teablest and laptop styles*/
@media screen and (min-width: 860px) {
  .sSlide {
    max-width: 25%;
  }

  .sImg {
    height: auto;
  }

  .slideshow {
    width: 25%;
    max-width: 25%
  }
}

/*desktop styles */
@media screen and (min-width: 1400px) {
  .sSlide {
    max-width: 100%;
  }

  .sImg {
    height: auto;
  }

  .slideshow {
    width: 100;
    max-width: 100%;
  }
}