how to fix opacity 0 and transform on mobile with aos.js?

Question

I use AOS.js to animate on scroll in NUXT. AOS inited off animation on mobile, but some blocks in v-for loading with 0 opacity and transformed. This blocks have custom css hovers with transition.

I try use wrapper for aos and animate only him but it not work. dunno why but only this block get data-aos="fade-down" on mobile

<div class="card-wrapper">
      <div
        v-for="(card, index) in cards"
        :key="index"
        class="card"
        :style="card.style"
        data-aos="fade-down"
        :data-aos-delay="index * 100"
        data-aos-once="true"
        data-aos-offset="-200"
      >
        <div class="card-img-wrapper">
          <img :src="card.img" :alt="card.name" class="card-img" />
        </div>
        <h4 class="text-center text-white card-name">{{ card.name }} .    </h4>
      </div>
    </div>

my scss styles

  .card {
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
  &-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 40px;
  }

  &-img-wrapper {
    &:before {
      content: '';
      width: 100px;
      height: 100px;
      border-radius: 100%;
      background: white;
      display: block;
      position: absolute;
      left: calc(50% - 50px);
      top: calc(50% - 90px);
      transition: 0.4s ease-out;
    }
  }

  &-name {
    margin-top: 70px;
  }

  &-img {
    display: flex;
    margin: auto;
    width: 62px;
    height: 62px;
    transition: 0.6s ease;
    transform: translateZ(100px);
    margin-top: 20px;
  }

  &:hover {
    cursor: pointer;

    & .card-img {
      transform: scale(1.2);
    }

    & .card-img-wrapper:before {
      transform: scale(20);
      transition: 0.4s ease-in;
    }

    & .card-name {
      color: black;
      transform: translateZ(100px);
      transition: 0.4s ease-in;
    }
  }
}

I want no opacity and transform on mobile