swiperを使ったスライド。ブレイクポイントの1200px以上に画面幅を広げるとレイアウトが崩れる

実現したいこと

swiperでスライドにて、記事5本を以下の条件に合わせて表示させたいです。

スライドの条件：
・画面幅559px以下の時は、1枚は全表示、左右2枚をはみ出して表示（イメージ→🌛🌝🌜）
・画面幅560px以上の時も、1枚は全表示、左右2枚をはみ出して表示（イメージ→🌛🌝🌜）
・画面幅1200px以上の時は、3枚は全表示、左右2枚をはみ出して表示（イメージ→🌛🌝🌝🌝🌜）

前提

swiperを使ったコーディングの課題をしています。

発生している問題・エラーメッセージ

ですが、3つ目の条件「画面幅1200px」を超えると、以下のように表示がくずれます。
・1→5→1→2→3→1→2→3→4→5→4みたいな感じで順番がめちゃくちゃになる
・そもそも3枚全表示、左右2枚表示ではなく表示枚数がめちゃくちゃ

1200px以上の時でも上手く表示される方法がわかりましたらご教示お願いします。

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name = "viewport" content = "width = device-width, initial-scale=1, user-scalable=yes">
6<title>ユアコーディング</title>
7<link rel="stylesheet" href="css/reset.css">
8<link rel="preconnect" href="https://fonts.googleapis.com">
9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
11<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
12<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.5/swiper-bundle.css">
13<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
14<link rel="stylesheet" href="css/style.css">
15</head>
16
17<body>
18	<header id="header">
19		<div class="header__inner wrapper">
20			<h1 class="site-logo">
21				<a href="top.html"><img src="img/logo.svg" alt="ユアコーディング">ユアコーディング</a></h1>
22			<nav class="header__nav">
23				<ul class="header__nav-list">
24					<li><a href="#feature">特徴</a></li>
25					<li><a href="#price">価格</a></li>
26					<li><a href="#contact">お問い合わせ</a></li>
27				</ul>
28			</nav>
29			<a class="inquiry__btn" href="#contact">お問い合わせ</a>
30			<div class="header__hamburger hamburger">
31				<span></span>
32				<span></span>
33				<span></span>
34			</div>
35		</div>
36	</header>
37	
38	<main>
39		<div class="mainVisual">
40			<div class="wrapper mainVisual__inner">
41				<div class="mainVisual__text">
42					<p class="mainVisual__title">コーディングの手間を<br>最小に、デザインに注力<br>
43				    する助けに</p>
44				  <p class="mainVisual__message">ユアコーディングはコーディングに<br>特化したフリーランス<br>デザインに注力されたい方の<br>助けになります</p>
45					
46					<div class="inquiry__btn">
47						<a href="#contact">お問い合わせ</a>
48					</div>
49				</div>
50			    <div class="bg__manager">
51					<img src="img/manager.png" alt="">
52				</div>
53			</div>
54		</div>
55		
56		〜〜省略〜〜
57		
58		<section id="works">
59			<h2 class="sec-title" data-aos="fade-up">
60				<span class="ja">制作実績</span>
61				<span class="en">WORKS</span>
62			</h2>
63			
64			<div class="swiper" data-aos="fade-up">
65				<div class="swiper-wrapper">
66					<div class="swiper-slide"><!-- スライド01 -->
67						<div class="img">
68							<img src="img/works01.jpg" alt="">
69						</div>
70						<h3>コーディングカンファレンスのイベントLPの制作を行いました！①</h3>
71						<ul>
72						   <li>採用技術：jQuery,Bootstrap4</li>
73						   <li>実装期間：2週間</li>
74						   <li>担当コーダー：石井</li>
75						</ul>
76					</div>
77					<div class="swiper-slide"><!-- スライド02 -->
78						<div class="img">
79							<img src="img/works02.jpg" alt="">
80						</div>
81						<h3>コーディングカンファレンスのイベントLPの制作を行いました！②</h3>
82						<ul>
83						   <li>採用技術：jQuery,Bootstrap4</li>
84						   <li>実装期間：2週間</li>
85						   <li>担当コーダー：石井</li>
86						</ul>
87					</div>
88					<div class="swiper-slide"><!-- スライド03 -->
89						<div class="img">
90							<img src="img/works03.jpg" alt="">
91						</div>
92						<h3>コーディングカンファレンスのイベントLPの制作を行いました！③</h3>
93						<ul>
94						   <li>採用技術：jQuery,Bootstrap4</li>
95						   <li>実装期間：2週間</li>
96						   <li>担当コーダー：石井</li>
97						</ul>
98					</div>
99					<div class="swiper-slide"><!-- スライド04 -->
100						<div class="img">
101							<img src="img/works01.jpg" alt="">
102						</div>
103						<h3>コーディングカンファレンスのイベントLPの制作を行いました！④</h3>
104						<ul>
105						   <li>採用技術：jQuery,Bootstrap4</li>
106						   <li>実装期間：2週間</li>
107						   <li>担当コーダー：石井</li>
108						</ul>
109					</div>
110					<div class="swiper-slide"><!-- スライド05 -->
111						<div class="img">
112							<img src="img/works03.jpg" alt="">
113						</div>
114						<h3>コーディングカンファレンスのイベントLPの制作を行いました！⑤</h3>
115						<ul>
116						   <li>採用技術：jQuery,Bootstrap4</li>
117						   <li>実装期間：2週間</li>
118						   <li>担当コーダー：石井</li>
119						</ul>
120					</div>
121				</div>
122			</div>
123	</section>
124
125	〜〜省略〜〜
126
127	</footer>
128<script src="javascript/script.js"></script>
129<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.0.5/swiper-bundle.min.js"></script>
130<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
131<script>
132var mySwiper = new Swiper(".swiper", {
133	loop: true,
134	spaceBetween: 20,
135	slidesPerView: 1.5,
136	initialSlide:0,
137	allowTouchMove: true,
138	centeredSlides:true,
139	breakpoints: {
140		560:{
141			spaceBetween: 30,
142			slidesPerView: 2,
143		},
144		1200:{
145			spaceBetween:50,
146			slidesPerView:3.5,
147		},
148        },
149        navigation: {
150			nextEl: ".swiper-button-next",
151			prevEl: ".swiper-button-prev",
152		},
153	pagination: {
154		el: ".swiper-pagination",
155		type: "bullets",
156		clickable: true,
157	},
158	autoplay: {
159		delay: 5000,
160		stopOnLastSlide: false,
161		disableOnInteraction: false,
162		reverseDirection: false,
163	},
164});
165    </script>
166<script>
167	AOS.init();
168</script>
169</body>
170</html>

CSS
1#works{
2	padding-top:64px;
3	padding-bottom:90px;
4}
5.swiper {
6	max-width:100vw;
7	height:auto;
8	overflow: hidden;
9}
10.swiper-slide {
11	width:auto;
12	height:auto;
13	margin:0;
14	border-radius:8px;
15	border:1px solid #DDD;
16	font-weight: bold;
17}
18.swiper-slide .img{
19	height:320px;
20}
21.swiper-slide img{
22	width: 100%;
23	height:100%;
24	object-fit: cover;
25}
26.swiper-slide h3{
27	font-size: 1.6rem;
28	margin-bottom:34px;
29	padding:24px 18px 0;
30}
31.swiper-slide ul{
32	font-size: 1.4rem;
33	line-height:1.8;
34	padding:0px 18px 34px;
35}
36@media screen and (max-width: 960px) {
37	.swiper-slide .img{
38		height:210px;
39	}
40}