Iframe Map

HTML

<!--Iframe Map-->
<div class="map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3580.108286869791!2d-80.24917528497019!3d26.193155483442798!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d9052d4be19bbf%3A0x8343602fe9057b65!2sBroward%20Plumbing%20Inc.!5e0!3m2!1sen!2sca!4v1595168400925!5m2!1sen!2sca" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

CSS

.map{padding:0}
.map #map,.map iframe{height:50rem;width:100%;max-width:100%}

@media only screen and (max-width: 992px) {
	.map #map,.map iframe{height:30rem}
}

SCSS

.map {
	padding: 0;
	
	#map, iframe {
		height: 50rem;
		width: 100%;
		max-width: 100%;
	}
}

@media only screen and (max-width: 992px) {
	.map {
		iframe, #map {
			height: 30rem;
		}
	}
}