.image-fade-container {
  position: relative;
  height: min(50vw, 600px);
}
    
       .image-fade-container-xs {
  position: relative;
  height: min(70vw, 600px);
  
}
    
 .image-fade-container img {
  position: absolute;
  animation-name: multiple-image-crossfade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  

}

.image-fade-container-xs img {
  position: absolute;
  animation-name: multiple-image-crossfade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 12s;
  

}



    
    @keyframes multiple-image-crossfade
    {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
    
    /* Set different delays for each image */
   #f1 {
    animation-delay: 0s;
    background-color: white;
}

#f2 {
    animation-delay: -3s;
    background-color: white;
}

#f3 {
    animation-delay: -6s;
    background-color: white;
}

#f4 {
    animation-delay: -9s;
    background-color: white;
}