.cis-slider { width:100%; max-width:100%; margin:0; position:relative;overflow: hidden; }
.cis-main-image { position:relative; height:var(--height); overflow:hidden; }
.cis-main-image img { width:100%; height:100%; object-fit:cover; display:block; }
.cis-arrow { position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; cursor:pointer; z-index:10; color:#fff; background-color:rgba(0,0,0,0.4); padding:0.4rem 0.6rem; border-radius:50%; }
.cis-arrow.left { left:15px; } .cis-arrow.right { right:15px; }

.cis-thumbnails {
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:10px 0;
  scroll-behavior: smooth;
}
.cis-thumbnails::-webkit-scrollbar { display: none; }

.cis-thumb-wrap { text-align:center; flex:0 0 auto; }
.cis-thumb { width:100px; height:auto; cursor:pointer; border:2px solid transparent; margin:0 var(--thumb-gap); }
.cis-thumb.active { border-color:#0073aa; }
.cis-caption { font-size:0.8rem; margin-top:4px; }

.thumb-arrow {
  position:absolute;
  top:83%;
  transform:translateY(-50%);
  font-size:1.5rem;
  color:#333;
  background:#fff;
  border-radius:50%;
  padding:5px 10px;
  cursor:pointer;
  z-index:10;
  box-shadow:0 0 5px rgba(0,0,0,0.2);
}
.thumb-left { left:5px; }
.thumb-right { right:5px; }