padding-topを使って、アスペクト比を実行させ、iframを適切な大きさで表示させたい

前提・実現したいこと

表題の通り、アスペクト比を実行させてgoogle map
を適切なサイズに表示させたい
※なお、余分な個所は取り除いています。

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

padding-topを使ってもうまくいきませんでした。

試したこと

padding-topの調整などを試みるものの、レスポンシブ時に、小さくなってしまう
。なぜ起こるのか細分化して考えた結果、width,height、padding,marginなどが邪魔していると考え
調整を試みたが、うまくいきませんでした。
アスペクト比サイト

該当のソースコード

HTML
1<section class="access">
2				<div class="ineer">
3					
4					
5					<div class="accsess-map-inner">
6						<div class="map">
7							<iframe allowfullscreen height="450" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24933.858417388372!2d139.58105087468056!3d38.63203904518239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f8c6dbd6c03ae15%3A0x10bc5da99bc816ef!2z44CSOTk5LTcyMDUg5bGx5b2i55yM6ba05bKh5biC5rip5rW3!5e0!3m2!1sja!2sjp!4v1631286921047!5m2!1sja!2sjp" style="border:0;" width="600"></iframe>
8						</div><!-- /#map -->
9					</div><!-- /.accsess-map-inner -->
10				</div>
11			</section><!-- /.acsess -->

CSS
1
2.access {
3  background-image: url(../../../asserts/img/bg.png);
4  background-position: center;
5  background-repeat: no-repeat;
6  background-size: cover;
7  margin-top: 30px;
8}
9
10
11
12.access .map {
13  position: relative;
14  width: 100%;
15  padding-top: 50%;
16  /* = height ÷ width × 100 */
17  max-width: 765px;
18  margin: 0 auto;
19}
20
21@media screen and (max-width: 1100px) {
22  .access .map {
23    width: 95%;
24    height: 100%;
25    padding: 20px 15px;
26    margin: 0 auto;
27    padding-top: 50%;
28  }
29}
30
31.access .map > iframe {
32  position: absolute;
33  top: 0;
34  left: 0;
35  width: 100%;
36  height: 100%;
37  padding: 75px 40px;
38}
39
40@media screen and (max-width: 1100px) {
41  .access .map > iframe {
42    top: 50%;
43    left: 50%;
44    -webkit-transform: translate(-50%, -50%);
45            transform: translate(-50%, -50%);
46    width: 70%;
47    text-align: center;
48  }
49}
50
51@media screen and (max-width: 1100px) {
52  .access .map {
53    /*  position: absolute;
54                left: 50%;
55                top: 50%; */
56  }
57}
58

行動規範の内容に同意します

回答1件

レスポンシブ時に、小さくなってしまう

小さくなるようにサイズ指定しているからでは。

css
1@media screen and (max-width: 1100px) {
2  .access .map > iframe {
3    top: 50%;
4    left: 50%;
5    -webkit-transform: translate(-50%, -50%);
6            transform: translate(-50%, -50%);
7    width: 70%; /* ←これ */