diff --git a/templates/discover.gohtml b/templates/discover.gohtml
index 36361c8..f04d952 100644
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -56,7 +56,7 @@
       <h2 class="text-xl font-semibold text-white">Trending This Season</h2>
       <a href="/browse?order_by=popularity&sort=desc" class="text-accent text-sm hover:underline">View all</a>
     </div>
-    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8">
+    <div class="discover-grid">
       {{range $i, $anime := .Trending}}
         <div>
           {{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
@@ -70,7 +70,7 @@
       <h2 class="text-xl font-semibold text-white">Highly Anticipated</h2>
       <a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-accent text-sm hover:underline">View all</a>
     </div>
-    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8">
+    <div class="discover-grid">
       {{range $i, $anime := .Upcoming}}
         <div>
           {{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
@@ -84,7 +84,7 @@
       <h2 class="text-xl font-semibold text-white">All-Time Greats</h2>
       <a href="/browse?order_by=score&sort=desc" class="text-accent text-sm hover:underline">View all</a>
     </div>
-    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8">
+    <div class="discover-grid">
       {{range $i, $anime := .Top}}
         <div>
           {{template "anime_card" dict "Anime" $anime "WithActions" true "IsWatchlist" (index $.WatchlistMap $anime.MalID)}}
@@ -94,5 +94,12 @@
   </section>
 </div>
 
+<style>
+  .discover-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 1rem;
+  }
+</style>
 
 {{end}}
\ No newline at end of file