Как сделать адаптивный swiper vue3?

Есть свайпер и нужно как то сделать так, чтобы он был адаптивный. То есть его :slides-per-view="" уменьшалось при определенном размере экрана.

(Свайпер подключал через <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script> в index.html)

Как это сделать?

<template>
    <div class="swiper__container">
        <h1 class="swiper__title">{{ title }}</h1>
        <swiper-container class="swiper" :slides-per-view="5" :space-between="20">
            <swiper-slide v-for="(film, index) in films" :key="index" class="swiper-slide">
                <div class="swiper-slide__container"><img class="swiper__img" :src="film.imgUrl" :alt="film.imgAlt"><a
                        class="swiper-link" href="#">{{ film.link }}</a></div>
            </swiper-slide>


        </swiper-container>
    </div>
</template>