Swiperについてお聞きしたいです。

swiperで、各スライドが離れたスライドショーを作成したいのですが、swiper-slideにcssを当てても縦横サイズが変わってくれません。
また、他の解説サイトでswiperの解説を見た際に、swiper-slideにcssを当てる場合は、jsのswiperの記述の部分にslidesPerView: auto;を記述すると書いてありましたが、記述すると、検証ツールで見た際にautoの部分にエラーが発生して、スワイパーが動かなくなりました。

下記が自分の書いたコードになります。
https://codepen.io/xlsge/pen/vYRVOLN

実現したい見た目としては、下記のようなサイトのスライドが一つ一つ離れているようなものになります。
https://b-risk.jp/wp/wp-content/themes/brisk/sample/entry/20220425/dl/02.html

どうして自分のやり方だと色々問題が発生するのか知りたいです。
どなたか教えて頂けますと助かります。
よろしくお願いいたします。