после использования светящихся эффектов мобильные устройства демонстрируют css дизайн, отличный от windows

Question

мой скриншот рабочего стола: я нахожу на карту посередине, и появляется ее внутреннее изображение -

but in iphone and ipad, when i hover on the same card, i get this -

I am using github repository. before using glowing effects, it was working the same in both platforms. My glowing parts css-

.container-fluid .swiper-container .swiper-wrapper .swiper-slide .flip-card .flip-card-front:before{
  position:absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;

  content:'';
  border-radius:15px;
  border: 3px;
  background: #fff;
  z-index: -1;

}
.container-fluid .swiper-container .swiper-wrapper .swiper-slide .flip-card .flip-card-front:after{
  position:absolute;
  top: -2px;
  left: -2px;
  bottom: -2px;
  right: -2px;

  content:'';
  border-radius:15px;
  border: 3px;
  background: #fff;
  z-index: -2;
  filter: blur(40px);

}
.container-fluid .swiper-container .swiper-wrapper .swiper-slide .flip-card .flip-card-front:nth-child(2n):before,
.container-fluid .swiper-container .swiper-wrapper .swiper-slide .flip-card .flip-card-front:nth-child(2n):after{
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);

}
.container-fluid .swiper-container .swiper-wrapper .swiper-slide .flip-card .flip-card-front:nth-child(2n+1):before,
.container-fluid .swiper-container .swiper-wrapper .swiper-slide .flip-card .flip-card-front:nth-child(2n+1):after{
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(40,47,50,1) 35%, rgba(0,212,255,1) 100%);

}

My html code for a single card -

Давайте Go!