swiperによるスライダーにオーバーレイをぴったり貼り付けたい

下記のサイト通りにページネーションのドットをoverlayのかかったスライダーの外に出したのですが、
レスポンシブ時にオーバーレイの高さがスライダーと一致せずオーバーレイがページネーションにかかってしまう。

https://garigaricode.com/swiper_navigation/#sample4

試したこと

・サイト内コード通りにコーディング
・ブレークポイントごとにオーバーレイの高さを変更したが、画面幅を変えるとオーバーレイの灰色がスライダーから飛び出したり縮んだりしてしまう。

html
1 <div id="mv">
2      <div class="swiper-parent">
3        <div class="swiper-container">
4          <div class="swiper-wrapper">
5            <div class="swiper-slide">
6              <img src="img/top1.png" alt="" />
7              <div class="mv-overlay"></div>
8              <div class="swiper-txt-set">
9                <p class="mv-main-txt">
10                  We value customers <br />
11                  more than anyone.
12                </p>
13                <p class="mv-sub-txt">
14                  We’re a creative digital marketing company<br class="brpc" />
15                  that helps you bring better results.
16                </p>
17                <div class="btn-wrapper swiper-btn">
18                  <a href="" class="swiper-btn-link btn-link">MORE</a>
19                </div>
20              </div>
21            </div>
22            <div class="swiper-slide">
23              <img src="img/top2.png" alt="" />
24              <div class="mv-overlay"></div>
25              <div class="swiper-txt-set">
26                <p class="mv-main-txt">
27                  We’re a creative<br />
28                  marketing team
29                </p>
30                <p class="mv-sub-txt">
31                  We’re a creative digital marketing company
32                  <br />that helps you bring better results.
33                </p>
34              </div>
35            </div>
36            <div class="swiper-slide">
37              <img src="img/top3.png" alt="" />
38              <div class="mv-overlay"></div>
39              <div class="swiper-txt-set">
40                <p class="mv-main-txt">
41                  Enjoy your Website <br />and make it better!
42                </p>
43                <p class="mv-sub-txt">
44                  Enjoy a combination of strategy, results,<br />
45                  and service, that create the best experience possible.
46                </p>
47              </div>
48            </div>
49          </div>
50          <div class="swiper-pagination"></div>
51        </div>
52        </div>
53    </div>

CSS
1#mv{
2  position: relative;
3  width: 100%;
4  padding-top: 8rem;
5}
6
7.mv-overlay{
8  position: absolute;
9  top: 0;
10  background: #555;
11  width: 100%;
12  height: 560px;
13  opacity: 0.3;
14  display: none;
15}
16.swiper-txt-set{
17  position: absolute;
18    width: 80%;
19    top: 10rem;
20    left: 15rem;
21}
22.mv-main-txt{
23  font-size: 4.2rem;
24  font-weight: bold;
25  line-height: 1.69;
26}
27.mv-sub-txt{
28  font-size: 1.6rem;
29  font-weight: bold;
30  line-height: 1.68;
31}
32
33.swiper-slide img{
34margin-left: auto;
35display: block;
36}
37
38.swiper-pagination-bullet-active{
39  background: #3BB6D5 !important;
40}
41
42.swiper-parent {
43	position: relative;
44}
45/* Swiper本体 */
46.swiper-container {
47	padding-bottom: 50px !important;	
48	box-sizing: content-box;
49}
50
51.swiper-button-prev, .swiper-button-next {
52
53	margin-top: -22px;			
54}