.fade-container {
  /* Set size for the container */
    width: 1200px;
    height: 994px;
    position: relative;
}

.fade-image {
  /* Position images to stack on top of each other */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Hide all images initially */
  /* Add smooth transition for standard state changes */
  transition: opacity 1s ease-in-out; 
}

/*
 * Use animation to continuously loop the fade effect.
 * The animation takes 8 seconds in total (4s for each image to fade in and out).
 */
.fade-image:first-child {
    animation: fade 4s infinite;
    
}

.fade-image:last-child {
    animation: fade 4s infinite;
    animation-delay: 2s; 

}

@keyframes fade {
  /*
   * 0% to 25%: Image fades in and stays visible (0 -> 1 opacity)
   * 25% to 50%: Image fades out (1 -> 0 opacity)
   * 50% to 100%: Image remains hidden (0 opacity)
   */
  0% {
    opacity: 0;
  }
  /*12.5% {*/
  /*  opacity: 1; */
  /*}*/
  
  10% {
      opacity: .9;
  }
  
  50% {
    opacity: 1;
  }
  
  
  
  90% {
    opacity: .1; 
  }
  100% {
    opacity: 0;
  }
}


@media screen and (max-width:75em) {
    .fade-container {
        width: 700px;
        height: 450px;
    }
    article {
        width: 100%;
    }
}


@media screen and (max-width:40em) {
    .fade-container {
        width: 300px;
        height: 200px;
    }
    article {
        width: 100%;
    }
}