Swiper Js blurry carousel when resizing for phone

Question

So im having a problem when i resize my page the carousel turns blurry not just images but the whole thing text icons all of them, it does this on different sizes its not just specific to phone or one size, when i resize it manually with the browser at certain widths it also turns blurry.

var swiper = new Swiper("#swiper-portfolios", {
    effect: "coverflow",
    grabCursor: true,
    centeredSlides: true,
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: false,
    },
    loop: true,

    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
  
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  
    keyboard: {
      enabled: true
    },

    breakpoints: {
      560: {
        slidesPerView: 1,
        centeredSlides: true,

      },
      768: {
        slidesPerView: 1,
        centeredSlides: false,

      },
      1024: {
        slidesPerView: 2,
        spaceBetween: -300,
        
      }
    }
  });

above is the code i have for my swiper.
swiper version is 8.4.5.

Now my goal would be to either not have blurry text and keep whatever transition there is or just remove the transition for blurr fully and just have it as is.