Google map レスポンシブ対応させたい

前提・実現したいこと

Google mapをレスポンシブ対応したい．
・画面中央に配置したい
・縦横比を維持したい

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

エラーメッセージ

該当のソースコード

html
1<div class="access">
2    <div class="access__wrapper">
3      <div data-aos="fade-up" class="access__wrapper__top">
4        <img src="img/logo02.png" alt="石井花壇" class="access__wrapper__top__logo">
5         <h2 class="access__wrapper__top____title">
6          アクセス
7         </h2>
8      </div>
9      <div class="access__wrapper__contact">
10        <img data-aos="fade-up" class="access__wrapper__contact__img" src="img/acess.jpg" alt="石井花壇">
11        <div data-aos="fade-up" class="access__wrapper__contact__text">
12          <h3 class="access__wrapper__contact__text__addses access__column">
13            住所
14          </h3>
15          <h4 class="access__wrapper__contact__text__addses access__column">
16            〒000-0000 
17            <br>
18            山形県鶴岡市xxxxxxxxxx
19          </h4>
20          <h3 class="access__wrapper__contact__text__tel access__column">
21            TEL/FAX
22          </h3>
23          <h4 class="access__wrapper__contact__text__tel access__column">
24            000-0000-0000/00-0000-0000
25          </h4>
26          <h3 class="access__wrapper__contact__text__time access__column">
27            営業時間
28          </h3>
29          <h4 class="access__wrapper__contact__text__time access__column">
30            14:00-23:00
31          </h4>
32          <p class="access__wrapper__contact__text__secondary access__column">
33            ＊4名以上のご予約の場合は、最寄り駅の「鶴岡駅」より送迎が可能ですので、<span class="access__wrapper__contact__text__secondary__line"> ご連絡ください。</span>
34          </p>
35        </div>
36      </div>
37      <div class="access__wrapper__map">
38        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d399280.01120326994!2d139.50370870788674!3d38.571209408987386!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8c752ece99152b%3A0xc6ea0016956290d7!2z5bGx5b2i55yM6ba05bKh5biC!5e0!3m2!1sja!2sjp!4v1640849381618!5m2!1sja!2sjp" width="792px" height="592px" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
39      </div>
40    </div>
41  </div>

scss
1.access{
2  width: 100%;
3  background: url("img/bg@2x.png");
4  background-position: center;
5  background-size: cover;
6  background-repeat: no-repeat;
7  @include mq(sp){ 
8  padding: 0 10px;
9  }
10  .access__wrapper{
11    .access__wrapper__top{
12      text-align: center;
13      width: 1180px;
14      margin: 0 auto;
15      @include mq(tab){ 
16       width: 100%;
17      }
18      .access__wrapper__top__logo{
19        margin: 60px 0 20px;
20      }
21      .access__wrapper__top____title{
22        font-size: calc(20px + 16 * (100vw - 370px)/1550);
23        margin-bottom: 111px;
24      }
25    }
26    .access__wrapper__contact{
27      display: flex;
28      margin-left: 19.2%;
29      @include mq(tab){ 
30        margin: 0;
31      }
32      @include mq(sp){ 
33        display: block;
34        margin: 0;
35      }
36      .access__wrapper__contact__img{
37        width: 656px;
38        margin-right: 4.3%;
39        height: 370px;
40        @include mq(sp){ 
41          width: 100%;
42          margin: 0;
43        }
44      }
45      .access__wrapper__contact__text{
46        font-size: calc(12px + 4 * (100vw - 768px)/1152);
47        line-height: 2;
48        padding-top: 8px;
49        width: 50%;
50        @include mq(sp){ 
51          width: 100%;
52        }
53        .access__column{
54          margin: 4px 0 4px;
55          .access__wrapper__contact__text__secondary__line{
56            display: block;
57            @include mq(tab){ 
58              display: inline;
59            }
60          }
61        }
62      }
63     .access__wrapper__map{
64      width: 100%;
65      height: 0;
66      padding-top: 74.74%;
67      position: relative;
68      iframe {
69        position: absolute;
70        left: 0;
71        top: 0;
72        height: 100%;
73        width: 100%;
74       }
75      }
76    }
77  }
78}