【CSSのみ】Swiperスライダーのページネーションを縦並びにする方法【pagination】

<div class="sample-slider-wrapper">
  <div class="sample-slider swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img
          src="https://images.unsplash.com/photo-1567225591450-06036b3392a6?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3MjU1NTQ&ixlib=rb-4.0.3&q=80"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="https://images.unsplash.com/photo-1653210818916-b1d7cc5c60e6?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3MjU1NTQ&ixlib=rb-4.0.3&q=80"
        />
      </div>
      <div class="swiper-slide">
        <img
          src="https://images.unsplash.com/photo-1610555770410-5d746dd977c1?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3MjkxMjk&ixlib=rb-4.0.3&q=80"
        />
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

.sample-slider-wrapper {
  position: relative;
  width: 500px;
  margin: 0 auto;
}

.sample-slider {
  width: 500px;
  margin: 0 auto;
}

.swiper-slide {
  width: 100%;
  height: auto;
}

.swiper-slide img {
  width: 100%;
}

/* bullet単体の幅は20pxにしたので、20pxが2つ並んだ40pxよりも1px小さい値を指定して縦並びを実現 */
.sample-slider-wrapper .swiper-pagination-bullets {
  bottom: initial;
  top: 50%;
  transform: translateY(-50%);
  left: initial;
  right: -50px;
  width: 39px;
}

/* 今回はbulletの幅を20pxと指定 */
.sample-slider-wrapper .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 20px 0;
  width: 20px;
  height: 20px;
}

/* スマホの時は、bulletsの幅を100%にすれば、bulletは横並びになる */
@media screen and (max-width: 767px) {
  .sample-slider-wrapper .swiper-pagination-bullets {
  　width: 100%;
  　transform: translatex(-50%);
  　bottom: -100px;
  　right: initial;
  　left: 50%;
    top: initial;
    bottom: -50px;
  }
  
  .sample-slider-wrapper .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 30px;
  }
}