.mgs-wrapper{
  position: relative;
  overflow: hidden;
  width:100%;
  padding: 20px 0;
  background:#fff;
}
.mgs-viewport{
  overflow:hidden;
  width:100%;
}
.mgs-track{
  display:flex;
  will-change: transform;
}
.mgs-item{
  flex:0 0 auto;
}
.mgs-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
/* Pause on hover (handled by JS speed, but we also stop anim tick) */
.mgs-pause:hover .mgs-track{
  /* JS will pause on hover; CSS here for clarity */
}

/* Arrows */
.mgs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  font-size: 28px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 5;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  line-height: 1;
}
.mgs-arrow:hover { background: #fff; }
.mgs-prev { left: 10px; }
.mgs-next { right: 10px; }