/* 
    Animations
*/

.fade-in {
    animation: fadeIn var(--animationDuration, 250ms) ease var(--animationDelay, 0s) both;
}

.fade-in-translate {
    animation: fadeInTranslateY var(--animationDuration, 500ms) ease var(--animationDelay, 100ms) both;
}

/* Desktop */
@media only screen and (min-width: 64rem) {
    .fade-in-translate {
        animation: fadeInTranslateX var(--animationDuration, 500ms) ease var(--animationDelay, 100ms) both;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInTranslateX {
    0% {
        opacity: 0;
        transform: translateX(-5px);
    } 100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInTranslateY {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    } 100% {
        opacity: 1;
        transform: translateY(0);
    }
}