diff --git a/src/pages/events/index.astro b/src/pages/events/index.astro
index 4448382..95faf10 100644
--- a/src/pages/events/index.astro
+++ b/src/pages/events/index.astro
@@ -81,6 +81,9 @@ const typeColors: Record<string, string> = {
         .post-card-img { transition: transform 0.5s ease; }
         .post-card:hover .post-card-img { transform: scale(1.05); }
 
+        .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+        @media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }
+
         .event-row { transition: background 0.2s ease; }
         .event-row:hover { background: rgba(125,163,113,0.09) !important; }
 
@@ -248,7 +251,7 @@ const typeColors: Record<string, string> = {
                     )}
 
                     <!-- Article grid -->
-                    <div id="post-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;">
+                    <div id="post-grid" class="post-grid">
                         {rest.map((post) => (
                             <a
                                 class="post-card"
diff --git a/src/pages/events/page/[page].astro b/src/pages/events/page/[page].astro
index be664e5..a530299 100644
--- a/src/pages/events/page/[page].astro
+++ b/src/pages/events/page/[page].astro
@@ -56,6 +56,9 @@ function formatDate(date: string) {
         .post-card:hover .post-title { text-decoration: underline; }
         .post-card-img { transition: transform 0.5s ease; }
         .post-card:hover .post-card-img { transform: scale(1.05); }
+
+        .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px; }
+        @media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }
     </style>
 
     <div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
@@ -100,7 +103,7 @@ function formatDate(date: string) {
             <section style="background: #e2e2e2; padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 72px);">
                 <div style="max-width: 1200px; margin: 0 auto;">
 
-                    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 48px;">
+                    <div class="post-grid">
                         {pagedArticles.map((post) => (
                             <a
                                 class="post-card"