.map-responsive{
    position: relative;
    width: 100%;
    height: 450px;   /* default desktop */
    overflow: hidden;
    border-radius: 8px;
}

.map-responsive iframe{
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 600px){
  .map-responsive{
      height: 250px;
  }
}

@media (min-width: 601px) and (max-width: 900px){
  .map-responsive{
      height: 350px;
  }
}

@media (min-width: 901px){
  .map-responsive{
      height: 450px;
  }
}