* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sequence {
  --duration: .2s;
  --easing: ease-out;
  --images-load-progress: 0;

  max-width: 1000px;
  aspect-ratio: 16/9;
  user-select: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.sequence.-load-on-click-:hover:not(.-loading-):not(.-images-are-loaded-) img {
  transform: scale(1.01);
}

.sequence.-loading- img {
  opacity: .3;
  transform: scale(.99)
}

.sequence.-load-on-click- {
  cursor: pointer;
}

.sequence.-images-are-loaded- {
  cursor: grab;
}

.sequence.-active- {
  cursor: grabbing;
}

.sequence img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition-property: transform, opacity;
  transition-duration: var(--duration);
  transition-timing-function: var(--easing);
}

.sequence__preloader {
  position: absolute;
  height: 4px;
  width: 70%;
  max-width: 350px;
  background: #efefef;
  left: 50%;
  top: calc(50% - 2px);
  border-radius: 6px;
  transform: translateX(-50%) scale(.95);
  overflow: hidden;
  transition: all var(--duration) var(--easing);
  opacity: 0;
  pointer-events: none;
}

.sequence__preloader:after  {
  position: absolute;
  content: '';
  height: 100%;
  width: calc(100% * var(--images-load-progress));
  background: #575757;
  left: 0;
  top: 0;
}

.sequence.-loading- .sequence__preloader {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}