diff --git a/src/Countries.jsx b/src/Countries.jsx
index 6170549..8b1e53e 100644
--- a/src/Countries.jsx
+++ b/src/Countries.jsx
@@ -430,9 +430,9 @@ export default function Countries({ mapOptions, onMapOptionClick }) {
           </div>
 
           <section aria-labelledby="products-heading" className="pt-6 pb-24">
-            <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
+            <div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-4">
 
-              <form className="hidden lg:block h-[65vh] px-1 py-1 overflow-y-scroll">
+              <form className="hidden md:block h-[65vh] px-1 py-1 overflow-y-scroll">
                 {/* Layers */}
                 <ul
                   role="list"
@@ -609,7 +609,7 @@ export default function Countries({ mapOptions, onMapOptionClick }) {
               </form>
 
               {/* Map itself */}
-              <div className="lg:col-span-3">
+              <div className="md:col-span-3">
                 <div className="h-[65vh]">
                   <Map
                     initialViewState={{
diff --git a/src/Points.jsx b/src/Points.jsx
index b160a44..2c699b2 100644
--- a/src/Points.jsx
+++ b/src/Points.jsx
@@ -908,9 +908,9 @@ export default function Points({ mapOptions, onMapOptionClick }) {
           </div>
 
           <section aria-labelledby="products-heading" className="pt-6 pb-24">
-            <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
+            <div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-4">
 
-              <form className="hidden lg:block h-[65vh] px-1 py-1 overflow-y-scroll">
+              <form className="hidden md:block h-[65vh] px-1 py-1 overflow-y-scroll">
                 {/* Layers */}
                 <ul
                   role="list"
@@ -1093,7 +1093,7 @@ export default function Points({ mapOptions, onMapOptionClick }) {
               </form>
 
               {/* Map itself */}
-              <div className="lg:col-span-3">
+              <div className="md:col-span-3">
                 <div className="h-[65vh]">
                   <Map
                     initialViewState={{
diff --git a/src/Regions.jsx b/src/Regions.jsx
index 1f29480..a4bc0df 100644
--- a/src/Regions.jsx
+++ b/src/Regions.jsx
@@ -485,9 +485,9 @@ export default function Regions({ mapOptions, onMapOptionClick }) {
 
 
           <section aria-labelledby="products-heading" className="pt-6 pb-24">
-            <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
+            <div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-4">
 
-              <form className="hidden lg:block h-[65vh] px-1 py-1 overflow-y-scroll">
+              <form className="hidden md:block h-[65vh] px-1 py-1 overflow-y-scroll">
                 {/* Layers */}
                 <ul
                   role="list"
@@ -668,7 +668,7 @@ export default function Regions({ mapOptions, onMapOptionClick }) {
               </form>
 
               {/* Map itself */}
-              <div className="lg:col-span-3">
+              <div className="md:col-span-3">
                 <div className="h-[65vh]">
                   <Map
                     initialViewState={{