enchance this with the games button state having the project setup has grid with 2 columns a 6 rows with the heading on top and have it centered

index.html

@@ -255,13 +255,13 @@ Download CV
                 <button id="games-btn" class="px-6 py-2 border border-red-600 text-red-600 rounded-full font-medium hover:bg-red-50" onclick="filterProjects('games')">Games</button>
                 <button id="art-btn" class="px-6 py-2 border border-red-600 text-red-600 rounded-full font-medium hover:bg-red-50" onclick="filterProjects('art')">Art</button>
             </div>
-            <div id="projects-grid" class="w-full max-w-6xl mx-auto grid md:grid-cols-2 gap-10">
-<!-- Games Column -->
-                <div id="games-col" class="md:col-span-1">
-<h3 class="text-2xl font-bold mb-6 text-center">Games</h3>
-                    <div class="grid grid-cols-1 gap-8">
-<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
-                            <img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat" class="w-full h-48 object-cover">
+            <div id="projects-grid" class="w-full max-w-7xl mx-auto">
+                <!-- Games Column -->
+                <div id="games-col" class="w-full">
+                    <h3 class="text-3xl font-bold mb-10 text-center">Games</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm h-full">
+<img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Bap Cat" class="w-full h-48 object-cover">
                             <div class="p-6">
                                 <h2 class="text-2xl font-bold mb-2">Bap Cat</h2>
                                 <h3 class="text-xl font-semibold mb-2">A game about a cat spreading chaos in their owners cafe</h3>
@@ -272,8 +272,8 @@ Download CV
                                 </a>
                             </div>
                         </div>
-                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
-                            <img src="http://static.photos/gaming/640x360/101" alt="Mech Warrior" class="w-full h-48 object-cover">
+                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm h-full">
+<img src="http://static.photos/gaming/640x360/101" alt="Mech Warrior" class="w-full h-48 object-cover">
                             <div class="p-6">
                                 <h2 class="text-2xl font-bold mb-2">Mech Warrior</h2>
                                 <h3 class="text-xl font-semibold mb-2">Epic mech battles in futuristic cities</h3>
@@ -287,11 +287,11 @@ Download CV
                     </div>
                 </div>
                 <!-- Art Column -->
-                <div id="art-col" class="md:col-span-1">
-<h3 class="text-2xl font-bold mb-6 text-center">Art</h3>
-                    <div class="grid grid-cols-1 gap-8">
-<div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
-                            <img src="https://static.wixstatic.com/media/6588f2_24e4126d37144f21863c7c78faba9f93~mv2.jpg" alt="The Fireflies Night" class="w-full h-48 object-cover">
+                <div id="art-col" class="w-full">
+                    <h3 class="text-3xl font-bold mb-10 text-center">Art</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm h-full">
+<img src="https://static.wixstatic.com/media/6588f2_24e4126d37144f21863c7c78faba9f93~mv2.jpg" alt="The Fireflies Night" class="w-full h-48 object-cover">
                             <div class="p-6">
                                 <h2 class="text-2xl font-bold mb-2">The Fireflies Night</h2>
                                 <h3 class="text-xl font-semibold mb-2">In the full moonlight, there is a house, where the fireflies lead weary travelers to its doors.</h3>
@@ -302,8 +302,8 @@ Download CV
                                 </a>
                             </div>
                         </div>
-                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
-                            <img src="http://static.photos/art/640x360/42" alt="Concept Art Collection" class="w-full h-48 object-cover">
+                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm h-full">
+<img src="http://static.photos/art/640x360/42" alt="Concept Art Collection" class="w-full h-48 object-cover">
                             <div class="p-6">
                                 <h2 class="text-2xl font-bold mb-2">Concept Art Collection</h2>
                                 <h3 class="text-xl font-semibold mb-2">Stylized character designs</h3>
@@ -318,9 +318,10 @@ Download CV
                 </div>
 </div>
 <!-- Games Column (Filtered State) -->
-<div id="games-col-filtered" class="grid grid-cols-1 gap-8" style="display: none;">
-    <h3 class="text-2xl font-bold mb-6 text-center">Games</h3>
-    <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm max-w-2xl mx-auto w-full">
+<div id="games-col-filtered" class="w-full" style="display: none;">
+    <h3 class="text-3xl font-bold mb-10 text-center">Games</h3>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm h-full">
 <img src="https://static.wixstatic.com/media/6588f2_d9fdecb14bfc48ac99bd5efed3e1b054~mv2.png" alt="Project 1" class="w-full h-48 object-cover">
         <div class="p-6">
             <h2 class="text-2xl font-bold mb-2">Bap Cat</h2>
@@ -331,8 +332,8 @@ Download CV
                 <i data-feather="arrow-right" class="ml-2"></i>
             </a>
         </div>
-    </div>
-                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
+        </div>
+        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm h-full">
 <img src="http://static.photos/gaming/640x360/101" alt="Game Project 1" class="w-full h-48 object-cover">
         <div class="p-6">
             <h2 class="text-2xl font-bold mb-2">Mech Warrior</h2>
@@ -344,7 +345,7 @@ Download CV
             </a>
         </div>
     </div>
-    <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm">
+        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm h-full">
 <img src="http://static.photos/gaming/640x360/102" alt="Game Project 2" class="w-full h-48 object-cover">
         <div class="p-6">
             <h2 class="text-2xl font-bold mb-2">Pixel Adventure</h2>

style.css

@@ -4,12 +4,25 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 /* Projects section styles */
+#projects-grid {
+    padding: 0 2rem;
+}
+
 .project-card {
     width: 100%;
     max-width: 100%;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
+    flex-direction: column;
 }
 
+.project-card img {
+    flex: 0 0 auto;
+}
+
+.project-card > div {
+    flex: 1;
+}
 .project-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.2);