How to disable AOS animation of specific element on mobile without disabling whole AOS library

disable-aos-on-mobile.css

/* How to turn off AOS animation in mobile screens?
https://stackoverflow.com/questions/53952611/how-to-turn-off-aos-animation-in-mobile-screens */

@media screen and (max-width: 480px) {
  .disable-aos-mobile [data-aos],
  .disable-aos-mobile[data-aos] {
 /*CSS transitions*/
        opacity: 1 !important;
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
  }
}