swiperを用いたスライダー

swiperを用いたスライダーを実装しております。

レスポンシブ対応で、767以上の時は3列
560以上の時は2列
それ以下は1列にしようとしています。
１列、３列の実装はできたのですが、
２列になった場合、
1つ目の要素0.5（半分
２つ目の要素1つ（丸々
３つ目の要素0.5(半分
といった表示になっています。
幅的には２になりますが、
きちんと２つずつ表示するにはどうすればいいでしょうか？

767以上の３つ表示のレスポンシブをコピーし、数字を変えただけなのですが
このような表示なってしまいました。

悪い点があればご指摘頂ければと思います。お願い致します。

html
1     <!-- Swiper -->
2  <div class="swiper-container">
3    <div class="swiper-wrapper">
4      <div class="swiper-slide">
5        <div class="swiper-slider-item">
6          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
7          <p class="swiper-title">タイトルタイトル</p>
8          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
9        </div>
10      </div>
11      <div class="swiper-slide">
12        <div class="swiper-slider-item">
13          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
14          <p class="swiper-title">タイトルタイトル</p>
15          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
16        </div>
17      </div>
18      <div class="swiper-slide">
19        <div class="swiper-slider-item">
20          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
21          <p class="swiper-title">タイトルタイトル</p>
22          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
23        </div>
24      </div>
25      <div class="swiper-slide">
26        <div class="swiper-slider-item">
27          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
28          <p class="swiper-title">タイトルタイトル</p>
29          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
30        </div>
31      </div>
32      <div class="swiper-slide">
33        <div class="swiper-slider-item">
34          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
35          <p class="swiper-title">タイトルタイトル</p>
36          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
37        </div>
38      </div>
39      <div class="swiper-slide">
40        <div class="swiper-slider-item">
41          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
42          <p class="swiper-title">タイトルタイトル</p>
43          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
44        </div>
45      </div>
46      <div class="swiper-slide">
47        <div class="swiper-slider-item">
48          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
49          <p class="swiper-title">タイトルタイトル</p>
50          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
51        </div>
52      </div>
53      <div class="swiper-slide">
54        <div class="swiper-slider-item">
55          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
56          <p class="swiper-title">タイトルタイトル</p>
57          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
58        </div>
59      </div>
60      <div class="swiper-slide">
61        <div class="swiper-slider-item">
62          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
63          <p class="swiper-title">タイトルタイトル</p>
64          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
65        </div>
66      </div>
67      <div class="swiper-slide">
68        <div class="swiper-slider-item">
69          <img src="./scene1.jpg" alt="img-swiper" class="swiper-img">
70          <p class="swiper-title">タイトルタイトル</p>
71          <p class="swiper-text">タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</p>
72        </div>
73      </div>
74    </div>
75    <!-- Add Pagination -->
76    <div class="swiper-pagination"></div>
77    <!-- Add Arrows -->
78    <div class="swiper-button-next"></div>
79    <div class="swiper-button-prev"></div>
80  </div>
81

script
1
2
3   <!-- Initialize Swiper -->
4   <script>
5
6var mySwiper = new Swiper ('.swiper-container', {
7  loop: true,
8  slidesPerView: 1,
9  spaceBetween:30,
10  centeredSlides : true,
11  pagination: '.swiper-pagination',
12  nextButton: '.swiper-button-next',
13  prevButton: '.swiper-button-prev',
14  breakpoints: {
15    560: {
16      slidesPerView: 2,
17      spaceBetween: 20
18    },
19
20    767: {
21      slidesPerView: 3,
22      spaceBetween: 30
23    }
24  },
25        pagination: {
26        el: '.swiper-pagination',
27        clickable: true,
28      },
29      navigation: {
30        nextEl: '.swiper-button-next',
31        prevEl: '.swiper-button-prev',
32      },
33})
34
35  
36  </script>
37
38
39

css
1
2
3.swiper-container {
4  width: 100%;
5  height: 100%;
6  background-color: #EEEEEE;
7}
8
9.swiper-wrapper {
10  padding: 30px 0;
11}
12.swiper-slide {
13  text-align: center;
14  font-size: 18px;
15  background: #fff;
16
17  /* Center slide text vertically */
18  display: -webkit-box;
19  display: -ms-flexbox;
20  display: -webkit-flex;
21  display: flex;
22  -webkit-box-pack: center;
23  -ms-flex-pack: center;
24  -webkit-justify-content: center;
25  justify-content: center;
26  -webkit-box-align: center;
27  -ms-flex-align: center;
28  -webkit-align-items: center;
29  align-items: center;
30
31  width: 300px;
32}
33
34.swiper-slide img {
35  width: 266px;
36  height: auto;
37}
38
39.swiper-slide {
40  padding: 13px;
41}
42
43
44.swiper-title {
45  font-size: 17px;
46  color: #6F7579;
47  padding: 20px 0;
48}
49
50.swiper-text {
51  font-size: 16px;
52  color: #6F7579;
53}
54
55