Swiperjs breakpoints doesn’t apply when reach the breakpoints

I’m using swiperjs and I want to make the swiper responsive by using breakpoints property. However, the default value of slidesPerView the isn’t applied when the screen reaches a smaller value than breakpoint. When I test in a separate html file, the breakpoints work fine but not in my laravel project. I’m using cdn as the source for swiper, here’s my code:

My js to initialize the swiper

var swiper = new Swiper('.history-swiper', {
    // Optional parameters
    slidesPerView: 2,
    spaceBetween: 10,

    breakpoints: {
        975: {
            slidesPerView: 2
        }
    },
  
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  
    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  
    // And if we need scrollbar
});

var swiper_index = new Swiper('.index-swiper', {
    // Optional parameters
    slidesPerView: 2,
    spaceBetween: 10,

    breakpoints: {
        975: {
            slidesPerView: 3,
            spaceBetween: 20,
        }
    },

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
});

my HTML for the swiper which have some cards as the swiper items

<div class="swiper index-swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
                <div class="swiper-slide">
                    <div class="card">
                        <div class="img-wrapper">
                            <img src="{{ asset('photos/anh1.jpeg') }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                              <h5 class="card-title">Dịch vụ chăm sóc sức khỏe A</h5>
                              <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae consectetur culpa quam nisi. Blanditiis sed officiis, corporis ullam maiores, magnam aperiam qui quasi amet eveniet quia quas cumque error dolore!
                            </p>
                              <a href="#" class="fw-bold">Xem chi tiết</a>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="card">
                        <div class="img-wrapper">
                            <img src="{{ asset('photos/anh1.jpeg') }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Dịch vụ chăm sóc sức khỏe A</h5>
                            <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo mollitia sapiente et dicta fuga quaerat accusantium, omnis eligendi dolorem fugit facere dolores recusandae ea quisquam vero voluptatem reprehenderit? Libero, natus.
                            </p>
                            <a href="#" class="fw-bold">Xem chi tiết</a>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="card">
                        <div class="img-wrapper">
                            <img src="{{ asset('photos/anh1.jpeg') }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">Dịch vụ chăm sóc sức khỏe A</h5>
                            <p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo mollitia sapiente et dicta fuga quaerat accusantium, omnis eligendi dolorem fugit facere dolores recusandae ea quisquam vero voluptatem reprehenderit? Libero, natus.
                            </p>
                            <a href="#" class="fw-bold">Xem chi tiết</a>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide">
                    <div class="card">
                        <div class="img-wrapper">
                            <img src="{{ asset('photos/anh1.jpeg') }}" class="card-img-top" alt="...">
                        </div>
                        <div class="card-body">
                              <h5 class="card-title">Dịch vụ chăm sóc sức khỏe A</h5>
                              <p class="card-text">Dịch vụ này mang đến rất nhiều những tư vấn hữu ích cho sức khỏe của khách hàng....Hơn nữa Khách hàng còn được trải nghiệmrất nhiều những tiện ích khác nữa...
                            </p>
                              <a href="#" class="fw-bold">Xem chi tiết</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

        </div> 

Here’s my css for cards and swiper

.card{
    margin: 0 .5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
}

.card .img-wrapper {
    max-width: 100%;
    height: 13em;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

img{
    max-height: 100%;
}

.carousel-custom{
    max-width: 945px;;
}

.card-img-top{
    object-fit: none;
}

.card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Number of lines to display before cutting off text */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swiper {
    width: 100%;
    height: fit-content;
    padding: 0 10px 10px 0px;
}

.swiper-slide{
    width: fit-content;
}

.history-swiper > .swiper-wrapper{
    padding: 24px 0 24px 0;
}