スライダーのswiperの実装でカードの幅を維持できない

実現したいこと

高さ407px、幅322pxのカードをスライドするようにしたい。

前提

Swiperを使用し、スライドを実装したい。
swiperは動いているのですが、CSSが崩れています。
max-widthはnoneに設定しても崩れます。

↓見本

↓現状

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <meta name="description" content="ユアコーディングはコーディングに 特化したフリーランス デザインに注力されたい方の 助けになります">
9    <link rel="preconnect" href="https://fonts.googleapis.com">
10    <title>ユアコーディング</title>
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
13    <link rel=”icon” href=“img/favicon-3.ico”>
14    <linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
15    
16    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
17    <link rel="stylesheet" href="sass/Intermediate/css/common.css">
18</head>
19
20<body>
21<section class="works">
22                <div class="work-inner">
23                    <h2 class="section-ttl">
24                        <span class="section-ttl_main">制作実績</span><!-- /.section-ttl_main -->
25                        <span class="section-ttl_sub">Works</span><!-- /.section-ttl_sub -->
26                    </h2><!-- /.section-ttl -->
27
28                    <!-- Slider main container -->
29                    <div class="swiper">
30                        <!-- Additional required wrapper -->
31                        <div class="swiper-wrapper">
32                            <!-- Slides -->
33                            <article class="swiper-slide">
34                                <figure><img src="img/digital-marketing-1433427_1280-1.png" alt=""></figure>
35                                <div class="swiper-slide__textbox">
36                                    <h3 class="swiper-slide__textbox-heading">
37                                        株式会社サンプル様採用サイトのコーディングを行いました！</h3>
38                                    <!-- /.swiper-slide__textbox-heading -->
39                                    <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br>
40                                        実装期間：2週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk -->
41                                </div><!-- /.swiper-slide__textbox -->
42                            </article>
43                            <article class="swiper-slide">
44                                <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure>
45                                <div class="swiper-slide__textbox">
46                                    <h3 class="swiper-slide__textbox-heading">
47                                        株式会社サンプル様採用サイトのコーディングを行いました！</h3>
48                                    <!-- /.swiper-slide__textbox-heading -->
49                                    <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br>
50                                        実装期間：6週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk -->
51                                </div><!-- /.swiper-slide__textbox -->
52                            </article>
53                            <article class="swiper-slide">
54                                <figure><img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt=""></figure>
55                                <div class="swiper-slide__textbox">
56                                    <h3 class="swiper-slide__textbox-heading">
57                                        株式会社サンプル様採用サイトのコーディングを行いました！</h3>
58                                    <!-- /.swiper-slide__textbox-heading -->
59                                    <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br>
60                                        実装期間：4週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk -->
61                                </div><!-- /.swiper-slide__textbox -->
62                            </article>
63                            <article class="swiper-slide">
64                                <figure><img src="img/digital-marketing-1433427_1280-1.png" alt=""></figure>
65                                <div class="swiper-slide__textbox">
66                                    <h3 class="swiper-slide__textbox-heading">
67                                        株式会社サンプル様採用サイトのコーディングを行いました！</h3>
68                                    <!-- /.swiper-slide__textbox-heading -->
69                                    <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br>
70                                        実装期間：2週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk -->
71                                </div><!-- /.swiper-slide__textbox -->
72                            </article>
73                            <article class="swiper-slide">
74                                <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure>
75                                <div class="swiper-slide__textbox">
76                                    <h3 class="swiper-slide__textbox-heading">
77                                        株式会社サンプル様採用サイトのコーディングを行いました！</h3>
78                                    <!-- /.swiper-slide__textbox-heading -->
79                                    <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br>
80                                        実装期間：6週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk -->
81                                </div><!-- /.swiper-slide__textbox -->
82                            </article>
83                            <article class="swiper-slide">
84                                <figure><img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt=""></figure>
85                                <div class="swiper-slide__textbox">
86                                    <h3 class="swiper-slide__textbox-heading">
87                                        株式会社サンプル様採用サイトのコーディングを行いました！</h3>
88                                    <!-- /.swiper-slide__textbox-heading -->
89                                    <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br>
90                                        実装期間：4週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk -->
91                                </div><!-- /.swiper-slide__textbox -->
92                            </article>
93                            <article class="swiper-slide">
94                                <figure><img src="img/digital-marketing-1433427_1280-1.png" alt=""></figure>
95                                <div class="swiper-slide__textbox">
96                                    <h3 class="swiper-slide__textbox-heading">
97                                        株式会社サンプル様採用サイトのコーディングを行いました！</h3>
98                                    <!-- /.swiper-slide__textbox-heading -->
99                                    <p class="swiper-slide__textbox-desk">採用技術：jQuery,Bootstrap4 <br>
100                                        実装期間：6週間<br> 担当コーダー：石井</p><!-- /.swiper-slide__textbox-desk -->
101                                </div><!-- /.swiper-slide__textbox -->
102                            </article>
103
104                        </div>
105
106                    </div><!-- /.swiper -->
107                </div><!-- /.section-inner -->
108            </section><!-- /.works -->
109
110
111    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
112    <script src="js/script.js"></script>
113</body>

SASS
1/* works
2------------------------------------------------------ */
3.work-inner {
4    padding-top: 30px;
5    padding-bottom: 30px;
6
7    @include medium {
8        padding-top: 55px;
9        padding-bottom: 70px;
10    }
11}
12.swiper-wrapper {
13    display: flex;
14    max-width: none;
15}
16.swiper-slide {
17    width: 322px;
18    height: 407px;
19    border: 1px solid #DDDDDD;
20    border-radius: 8px;
21    overflow: hidden;
22    figure {
23        img {
24            height: 210px;
25            display: block;
26            object-fit: cover;
27            width: 100%;
28        }
29    }
30    &__textbox {
31        padding: 18px;
32    }
33    &__textbox-heading {
34        font-size: 16px;
35        font-weight: bold;
36        line-height: 1.5;
37        color: $c_text;
38        margin-bottom: 30px;
39    }
40    &__textbox-desk {
41        font-size: 14px;
42        line-height: 1.5;
43        font-weight: bold;
44        color: $c_text;
45    }
46}

Swiper
1
2
3//スワイパー　works
4//--------------------------------------------
5const swiper = new Swiper('.swiper', {
6    loop: true,
7    loopAdditionalSlides: 1,
8    autoplay: {
9        delay: 4000,
10        disableOnInteraction: false,
11    },
12    speed: 800,
13    grabCursor: true,
14    centeredSlides: true,
15    spaceBetween: 56,
16    breakpoints: {
17        0: {
18            slidesPerView: 1.2,
19        },
20        700: {
21            slidesPerView: 'auto',
22        },
23    }
24});