/* Attempt at animating a carrousel of background images */

.bg-fade-wrapper{
    position: relative;
    overflow: hidden;
}
.bg-fade{
    position: absolute;
    content :'';
    width: 100%;
    height: 100%;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    animation-name: fade;
    animation-duration:18s;
    animation-iteration-count: infinite;
}
.bg-fade::after{
    position: absolute;
    content :'';
    width: 100%;
    height: 100%;
    inset: 0;
    background-size: contain;
    background-color: rgba(0,0,0,0.0);
}
.bg-fade:nth-child(1){
    animation-delay: 0s;
}
.bg-fade:nth-child(2){
    animation-delay: 6s;
}
.bg-fade:nth-child(3){
    animation-delay: 12s;
}

@keyframes fade {
    0% {opacity: 0;}
    16.66% {opacity: 1;}
    33.33% {opacity: 1;}
    49.99% {opacity: 0;}
    100% {opacity: 0;}
}