/* (A) SHARED */
.sImg, .sCaption { width: 100%; }
.sSlide, .sLeft, .sRight { display: flex; }

/* (B) CONTAINER */
.sSlide {
  flex-wrap: wrap;
  position: relative;
  max-width: 100%;
}

/* (C) IMAGE */
.sImg {
  height: 720px;
  object-fit: cover; /* fill, contain, scale-down */
}

/* (D) CAPTION */
.sCaption {
  padding: 0px;
  color: #fff;
  background: #000;
}

/* (E) CONTROLS */
/* (E1) 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; }

/* (E2) SHOW ONLY ON HOVER */
.sLeft, .sRight {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
.sSlide:hover .sLeft, .sSlide:hover .sRight {
  visibility: visible;
  opacity: 1;
}
