Mapa responsivo

Mapa responsivo

Mapa Responsivo:
// HTML
<div class="map-responsive">
 <iframe
   src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3738.1822221903344!2d-54.59013868549774!3d-20.45770756021711!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9486e8954ac0b10d%3A0x7149aba0cb5688b8!2sShopping%20Campo%20Grande!5e0!3m2!1spt-BR!2sbr!4v1676067178961!5m2!1spt-BR!2sbr"
   width="600"
   height="450"
   frameborder="0"
   style="border: 0"
   allowfullscreen="false"
   tabindex="0"
 ></iframe>
</div>

//CSS

.map-responsive {
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
      }

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