<div class="gmap">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d208042.85272035783!2d138.6462963147339!3d35.43821449121056!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6019629a42fdc899%3A0xa6a1fcc916f3a4df!2z5a-M5aOr5bGx!5e0!3m2!1sja!2sjp!4v1695973220943!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>


.gmap {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 50px;
  background-color: #efefef;

  @media screen and (max-width:767px) {
    aspect-ratio: 2 / 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.