diff --git a/src/about.njk b/src/about.njk
index ce8ce5b..25bfe33 100644
--- a/src/about.njk
+++ b/src/about.njk
@@ -11,7 +11,7 @@ title: About
   <p>devICT is a welcoming and knowledgeable community where you can engage, contribute, and grow your skills as a web, game, or software developer.</p>
 </div>
 
-<div class="grid grid-3 mb-4">
+<div class="grid mb-4">
   <div class="card">
     <h3 class="text-2xl">Who we are</h3>
     <p>We are a group of individuals who have a common interest in software development.</p>
@@ -39,7 +39,7 @@ title: About
   <p class="text-lg max-w-4xl">The devICT Institute is a 501c3 non-profit governed by a board of directors. In addition to the board we are supported by volunteers who organize events and generally keep things running.</p>
 
   <h2 class="text-2xl mt-8">Board & Volunteers</h2>
-  <div class="grid grid-5 mt-4">
+  <div class="grid mt-4">
     <div class="volunteer-card">
       <img src="/img/leadership/seth-etter.jpg" alt="Image of Seth Etter">
       <strong>Seth Etter</strong>
diff --git a/src/index.njk b/src/index.njk
index a04769a..5f945b2 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -20,7 +20,7 @@ title: ""
 <hr class="my-8">
 
 <h2 class="text-3xl font-semibold my-8">Why contribute?</h2>
-<div class="grid grid-4 mb-4">
+<div class="grid mb-4">
   <div class="card">
     <h3>Build Skills</h3>
     <p>Working on real-world projects exposes you to new technologies and best practices.</p>
@@ -40,7 +40,7 @@ title: ""
 </div>
 
 <h2 class="text-3xl font-semibold my-8">How to contribute?</h2>
-<div class="grid grid-4 mb-4">
+<div class="grid mb-4">
   <div class="card">
     <h3>Join the Conversation</h3>
     <p>Join us <a href="https://slack.devict.org" class="link-blue">in Slack</a> and jump into the conversation! Share what you're working on, ask questions, and help others.</p>
diff --git a/static/styles.css b/static/styles.css
index 126e18a..c3c6145 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -25,7 +25,7 @@ img {
   --color-orange-hover: #ea580c;
   --color-gray-500: #6b7280;
   --color-gray-700: #374151;
-  --max-width: 1280px;
+  --max-width: 56rem;
 }
 
 /* Base */
@@ -206,41 +206,11 @@ hr {
   margin-top: 1rem;
 }
 
-/* Grid */
+/* Grid — columns fit to container width */
 .grid {
   display: grid;
   gap: 1rem;
-}
-
-.grid-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.grid-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.grid-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.grid-5 {
-  grid-template-columns: repeat(5, 1fr);
-}
-
-@media (max-width: 1024px) {
-  .grid-4, .grid-5 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .grid-3 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 768px) {
-  .grid-2, .grid-3, .grid-4, .grid-5 {
-    grid-template-columns: 1fr;
-  }
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 }
 
 /* Flex utilities */
@@ -330,20 +300,17 @@ hr {
 .hero h1 {
   font-size: 2.25rem;
   font-weight: bold;
-  max-width: 56rem;
   margin: 0 0 1rem;
 }
 
 .hero h2 {
   font-size: 1.25rem;
-  max-width: 56rem;
   margin: 0 0 1rem;
   font-weight: normal;
 }
 
 .hero p {
   font-size: 1.5rem;
-  max-width: 56rem;
   margin: 0 0 1rem;
 }