diff --git a/pages/_includes/ui/map-vector.html b/pages/_includes/ui/map-vector.html
index 82ae0773b..5f2956f83 100644
--- a/pages/_includes/ui/map-vector.html
+++ b/pages/_includes/ui/map-vector.html
@@ -3,8 +3,8 @@
 {% assign color = include.color | default: data.color | default: 'green' %}
 
 {% if data %}
-	<div class="embed-responsive embed-responsive-16x9">
-		<div class="embed-responsive-item">
+	<div class="ratio ratio-16x9">
+		<div>
 			<div id="map-{{ id }}" class="w-100 h-100"></div>
 		</div>
 	</div>
diff --git a/pages/_includes/ui/map.html b/pages/_includes/ui/map.html
index 5c4c0aa03..6898002a1 100644
--- a/pages/_includes/ui/map.html
+++ b/pages/_includes/ui/map.html
@@ -2,8 +2,8 @@
 {% assign data = site.data.maps[id] %}
 
 {% if data %}
-	<div class="embed-responsive embed-responsive-{{ data.ratio | default: include.ratio | default: '16x9' }}">
-		<div class="embed-responsive-item">
+	<div class="ratio ratio-{{ data.ratio | default: include.ratio | default: '16x9' }}">
+		<div>
 			<div id="map-{{ id }}" class="w-100 h-100{% if data.card %} rounded{% endif %}"></div>
 		</div>
 	</div>