body{
  margin: 0;
  font-size: 5em;
  background-image: url(img1/bg.jpg);
}

.banner {
  height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img1/valentin-petrov-m-mal-01.jpg');
  background-size: cover;
  background-position: center;
  animation: bgZoomIn 1s ease-in-out 1 forwards;
  z-index: -1;
  pointer-events: none;
}

@keyframes bgZoomIn {
  from {
    transform: scale(1.2);
  } to {
    transform: scale(1);
  }
}
@keyframes bgZoomOut {
  from {
    transform: scale(1);
  } to {
    transform: scale(2);
  }
}




main{
  width: min(1200px, 90vw);
  margin: auto;
  margin-bottom: 500px;
  
}
.slider{
  width: 100%;
  height: var(--height);
  overflow: hidden;
  mask-image: linear-gradient(
      to right,
      transparent,
      #000 10% 90%,
      transparent
  );
}
.slider .list{
  display: flex;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;
}
.slider .list .item{
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  animation: autoRun 20s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc( (20s / var(--quantity)) * (var(--position) - 2) - 20s)!important;
}
.slider .list .item img{
  width: 100%;
  margin-bottom: 500px;
}


@keyframes autoRun{
  from{
      left: 100%;
  }to{
      left: calc(var(--width) * -1);
  }
}
.slider:hover .item{
  animation-play-state: paused!important;
  filter: grayscale(1);
}
.slider .item:hover{
  filter: grayscale(0);
}
.slider[reverse="true"] .item{
  animation: reversePlay 10s linear infinite;
}
@keyframes reversePlay{
  from{
      left: calc(var(--width) * -1);
  }to{
      left: 100%;
  }
}