diff --git a/src/most-wanted/most-wanted.css b/src/most-wanted/most-wanted.css
index e218e10..cef4077 100644
--- a/src/most-wanted/most-wanted.css
+++ b/src/most-wanted/most-wanted.css
@@ -51,7 +51,7 @@ svg {
 main {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(var(--width-5), 1fr));
-  grid-gap: var(--spacing-large);
+  grid-gap: var(--spacing-medium);
 }
 
 .card-image,
@@ -81,6 +81,12 @@ main {
   animation: spin 1s linear infinite;
 }
 
+@media (min-width: 30em) {
+  main {
+    grid-gap: var(--spacing-large);
+  }
+}
+
 @media (min-width: 38em) {
   header {
     grid-column: span 2;
diff --git a/src/most-wanted/most-wanted.js b/src/most-wanted/most-wanted.js
index dc709e8..b5754f2 100644
--- a/src/most-wanted/most-wanted.js
+++ b/src/most-wanted/most-wanted.js
@@ -52,7 +52,7 @@ const App = () => {
 
   return (
     <>
-      <div className="container flex-1 pa4">
+      <div className="container flex-1 pa3 pa4-ns">
         <main className="w-100 mw9 center">
           <Header
             discogsUser={state.discogsUser}