* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.slowFade {
    display: flex;
    align-items: flex-start;
    background: #fff;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.slowFade .slide img {
    position: absolute;
    justify-content: center;
    width: 100%; /* images will stretch to cover the width */
    height:100%; /* images will stretch to cover the height */
    
   object-fit: contain;/* this ensures that the aspect ratio is maintained */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    opacity: 0;
    transform: scale(1) rotate(0deg); /* Adjusted to not scale or rotate initially */
    -webkit-animation: slowFade 126s infinite;
            animation: slowFade 126s infinite;
}
.slowFade .slide:nth-child(1) img { animation-delay: 0s; -webkit-animation-delay: 0s; }
.slowFade .slide:nth-child(2) img { animation-delay: 6s; -webkit-animation-delay: 6s; }
.slowFade .slide:nth-child(3) img { animation-delay: 12s; -webkit-animation-delay: 12s; }
.slowFade .slide:nth-child(4) img { animation-delay: 18s; -webkit-animation-delay: 18s; }
.slowFade .slide:nth-child(5) img { animation-delay: 24s; -webkit-animation-delay: 24s; }
.slowFade .slide:nth-child(6) img { animation-delay: 30s; -webkit-animation-delay: 30s; }
.slowFade .slide:nth-child(7) img { animation-delay: 36s; -webkit-animation-delay: 36s; }
.slowFade .slide:nth-child(8) img { animation-delay: 42s; -webkit-animation-delay: 42s; }
.slowFade .slide:nth-child(9) img { animation-delay: 48s; -webkit-animation-delay: 48s; }
.slowFade .slide:nth-child(10) img { animation-delay: 54s; -webkit-animation-delay: 54s; }
.slowFade .slide:nth-child(11) img { animation-delay: 60s; -webkit-animation-delay: 60s; }
.slowFade .slide:nth-child(12) img { animation-delay: 66s; -webkit-animation-delay: 66s; }
.slowFade .slide:nth-child(13) img { animation-delay: 72s; -webkit-animation-delay: 72s; }
.slowFade .slide:nth-child(14) img { animation-delay: 78s; -webkit-animation-delay: 78s; }
.slowFade .slide:nth-child(15) img { animation-delay: 84s; -webkit-animation-delay: 84s; }
.slowFade .slide:nth-child(16) img { animation-delay: 90s; -webkit-animation-delay: 90s; }
.slowFade .slide:nth-child(17) img { animation-delay: 96s; -webkit-animation-delay: 96s; }
.slowFade .slide:nth-child(18) img { animation-delay: 102s; -webkit-animation-delay: 102s; }
.slowFade .slide:nth-child(19) img { animation-delay: 108s; -webkit-animation-delay: 108s; }
.slowFade .slide:nth-child(20) img { animation-delay: 114s; -webkit-animation-delay: 114s; }
.slowFade .slide:nth-child(21) img { animation-delay: 120s; -webkit-animation-delay: 120s; }

@-webkit-keyframes slowFade {
    0%, 4.76% { opacity: 1; }
    9.52% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes slowFade {
    0%, 4.76% { opacity: 1; }
    9.52% { opacity: 0; }
    100% { opacity: 0; }
}