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

/* (B) SHARED */
.hide { visibility: hidden; }
.sImg, .sCaption { width: 100%; }
.sSlide, .sLeft, .sRight { display: flex; }

/* (C) CONTAINER */
.sSlide {
  flex-wrap: wrap;
  position: relative;
  max-width: 600px;
  margin: auto; /* Added this line to center the slideshow horizontally */
}

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

/* (E) CAPTION */
.sCaption {
  padding: 10px;
  color: #fff;
  background: #000;
}

/* (F) CONTROLS */
/* (F1) LEFT/RIGHT BUTTONS */
.sLeft, .sRight {
  align-items: center;
  position: absolute;
  top: 0;
  z-index: 9;
  height: 100%;
  padding: 0 20px;
  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;
}