/* (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; */
  /* width: 600px; */
}

@media (max-width: 1000px) {
  .sSlide {
    width: auto;
  }
}

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

/* (E) CAPTION */
.sCaption {
  padding: 10px;
  color: #000000;
  background: #ffffff;
  display: none;
}

/* (F) CONTROLS */
/* (F1) LEFT/RIGHT BUTTONS */
.sLeft,
.sRight {
  align-items: center;
  /* vertical-align: middle; */
  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;
  /* transform: scaleX(0.5); */
  /* font-weight: 300; */
}

.arrow {
  transform: scaleX(0.5);
  font-weight: 300;
  user-select: none;
}

.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;
}