グーグルマップを指定サイズから同じ比率で小さく変化させたいです

グーグルマップの埋め込みにおいて、width800px height400pxの大きさを上限にし、ウィンドウサイズを小さくしても同じ比率でマップを小さくできるようにしたいです。

現状、widthは800pxで止められるのですが、heightはmax-height400で指定しても高くなってしまいます。

コードは以下のように書いています。

よろしくお願いします。

コード<section id="map">
	<div class="map-container">
		<div class="map-inner">
		<h2 class="title">map</h2>
		<div class="line"></div>
		<div class="map">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26479.03031170751!2d139.69159028535225!3d35.65822187429706!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b563b00109f%3A0x337328def1e2ab26!2z5riL6LC36aeF!5e0!3m2!1sja!2sjp!4v1565529626963!5m2!1sja!2sjp" width="800" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
		</div>
		</div>
	</div>
</section>

コード/*map*/
.map-container{
	background-color: #EFEFEF;

}

.map{
	position: relative;
	max-width: 800px;
  	padding-top: 50%;  /* = height ÷ width × 100 */
  	margin: 0 auto;
}

.map iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  	margin-top:70px;
}