.slider {
   overflow: hidden;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: -1;
}

.slide::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: hsla(0, 0%, 0%, 0.247);
   z-index: 1;
}

.slider .slide {
   position: absolute;
   width: 100%;
   height: 100%;
}

.slide img {
   object-fit: cover;
}

.slide:nth-child(1) {
   animation: xfade 12s 0s infinite;
}

.slide:nth-child(2) {
   animation: xfade 12s 4s infinite;
}

.slide:nth-child(3) {
   animation: xfade 12s 8s infinite;
}

@keyframes xfade {
   25% {
      opacity: 1;
   }

   35% {
      opacity: 0;
   }

   92% {
      opacity: 0;
   }
}

@media (min-width: 768px) {

}