.slider {
  overflow: hidden;
  width: auto;
  height: 100vh;
  position: relative;
  display: flex;
}

.slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  animation: slider 42s infinite;
}

.slider .slide img {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  max-height: 100vh;

}

.slider .slide picture {
  width: 100vw;
  display: block;
}

/* Animation delays */
.slider .slide:nth-child(1) { animation-delay: 0s; }
.slider .slide:nth-child(2) { animation-delay: -10.5s; }
.slider .slide:nth-child(3) { animation-delay: -21s; }
.slider .slide:nth-child(4) { animation-delay: -31.5s; }

/* Keyframes */
@keyframes slider {
  0%, 24%, 100% {
    transform: translateX(0);
    animation-timing-function: ease;
  }
  25% {
    transform: translateX(-100%);
    animation-timing-function: step-end;
  }
  99% {
    transform: translateX(100%);
    animation-timing-function: ease;
  }
}

@media (max-width: 768px) {
  .slider {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .slider .slide img {
    height: auto;
    object-fit: contain;
    max-height: 100vh;
  }
}