.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.hero .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 16s infinite;
}

.hero .slide:nth-child(1) {
  background-image: url(/src/images/tinified/img-rotterdam-1.jpg);
  animation-delay: 0s;
}
.hero .slide:nth-child(2) {
  background-image: url(/src/images/tinified/img-rotterdam-2.png);
  animation-delay: 6s;
}
.hero .slide:nth-child(3) {
  background-image: url(/src/images/tinified/img-rotterdam-3.jpg);
  animation-delay: 12s;
}
.hero .slide:nth-child(4) {
  background-image: url(/src/images/tinified/img-rotterdam-2.png);
  animation-delay: 18s;
}
@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}