@keyframes scale-a-lil {
    from {
        scale: .9;
    }
}

@keyframes scale-invert {
    from {
        scale: 1.05;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes slide-left {
    from {
        transform: translateX(-12px);
    }
}

@keyframes slide-right {
    from {
        transform: translateX(+12px);
    }
}

@media (prefers-reduced-motion: no-preference) {

    .scaleAnimation.invert {
        animation: scale-invert linear both;
        animation-timeline: view();
        animation-range: 0vh 20vh;
    }

    .scaleAnimation {
        animation: scale-a-lil linear both;
        animation-timeline: view();
        animation-range: 0vh 30vh;
    }


    .fade-in {
        animation: fade-in linear both;
        animation-timeline: view();
        animation-range: 0vh 50vh;
    }

    .container-with-slide{
        overflow-x: hidden;
    }
    .slide-left-none {
        animation: none;
    }

    .slide-right-none {
        animation: none;
    }

    .slide-left {
        animation: slide-left linear both;
        animation-timeline: view();
        animation-range: -10vh 30vh;
        animation-iteration-count: 1;
    }

    .slide-right {
        animation: slide-right linear both;
        animation-timeline: view();
        animation-range: -10vh 30vh;
        animation-iteration-count: 1;
    }

    @media (min-width: 576px) {
        .slide-left-sm-none {
            animation: none;
        }

        .slide-right-sm-none {
            animation: none;
        }

        .slide-left-sm {
            animation: slide-left linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }

        .slide-right-sm {
            animation: slide-right linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }
    }


    /* Medium devices (tablets, 768px and up)*/
    @media (min-width: 768px) {
        .slide-left-md-none {
            animation: none;
        }

        .slide-right-md-none {
            animation: none;
        }

        .slide-left-md {
            animation: slide-left linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }

        .slide-right-md {
            animation: slide-right linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }
    }

    /* Large devices (desktops, 992px and up)*/
    @media (min-width: 992px) {

        .slide-left-lg-none {
            animation: none;
        }

        .slide-right-lg-none {
            animation: none;
        }

        .slide-left-lg {
            animation: slide-left linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }

        .slide-right-lg {
            animation: slide-right linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }
    }

    /* X-Large devices (large desktops, 1200px and up)*/
    @media (min-width: 1200px) {
        .slide-left-xl-none {
            animation: none;
        }

        .slide-right-xl-none {
            animation: none;
        }

        .slide-left-xl {
            animation: slide-left linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }

        .slide-right-xl {
            animation: slide-right linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }
    }

    /* XX-Large devices (larger desktops, 1400px and up)*/
    @media (min-width: 1400px) {
        .slide-left-xxl-none {
            animation: none;
        }

        .slide-right-xxl-none {
            animation: none;
        }

        .slide-left-xxl {
            animation: slide-left linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }

        .slide-right-xxl {
            animation: slide-right linear both;
            animation-timeline: view();
            animation-range: -10vh 30vh;
        }
    }
}