/* @import "tailwindcss"; */

.bg-fade-wrapper {
   position: relative;
   overflow: hidden;
   width: 100vw;
   height: 100vh;
   background-color: black;
}

.bg-fade {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    inset: 1;
    background-size: cover;
    background-position: top left;
    opacity: 0;
    animation-name: fade-out;
    animation-duration: 24s;
    animation-iteration-count: infinite;
}

.bg-fade:nth-child(2) {
    animation-delay: 6s;
}

.bg-fade:nth-child(3) {
    animation-delay: 12s;
}
.bg-fade:nth-child(4) {
    animation-delay: 18s;
}

@keyframes fade-out {
    0% {
        opacity: 0;
        transform: scale(100%);
    }
     16.6% {
        opacity: 1;        
     }
     33% { 
        opacity: 1;
     }
     48.66% {
        opacity: 0;
     }
     100% {
        opacity: 0;
     }
}

.bg-img-1 {
    background-image: url('../images/Moved.png');
}

.bg-img-2 {
    background-image: url('../images/Moved.png');
}



@media only screen and (max-width: 992) {
    .bg-img-1 {
        background-image: url('../images/moved-tablet.png');
    }
    .bg-img-2 {
        background-image: url('../images/moved-tablet.png');
    }
}

@media only screen and (max-width: 768px) {
    .bg-img-1 {
        background-image: url('../images/moved-tablet.png');
    }
    .bg-img-2 {
        background-image: url('../images/moved-tablet.png');
    }
}

@media only screen and (max-width: 576px) {
    .bg-img-1 {
        background-image: url('../images/moved-mobile.png');
    }
    .bg-img-2 {
        background-image: url('../images/moved-mobile.png');
    }
}


/* 
BREAKPOINTS 

Extra small: 0–576 pixels - DONE
Small: 577–768 pixels - DONE
Medium: 769–992 pixels
Large: 993–1200 pixels
Extra large: 1201 pixels and up
Mobile: 360 pixels
Tablet: 768 pixels
Desktop: 1366 pixels
*/