make this block same has the one above

index.html

@@ -316,34 +316,46 @@ Download CV
                     </div>
                 </div>
 <!-- Art Column -->
-                <div id="art-col" class="w-full">
+                <div id="art-col" class="w-full" style="display: grid;">
                     <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>
-                                <p class="text-gray-600 mb-4">Take control of a powerful mech and engage in intense combat scenarios</p>
-                                <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
-                                    View Project
-                                    <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 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>
-                                <p class="text-gray-600 mb-4">A series of character concepts for fantasy RPG game</p>
-                                <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
-                                    View Project
-                                    <i data-feather="arrow-right" class="ml-2"></i>
-                                </a>
-                            </div>
-                        </div>
-                    </div>
+                    <div class="grid grid-cols-1 gap-8">
+                        <div class="project-card bg-gray-50 rounded-xl overflow-hidden shadow-sm w-full">
+<img src="https://static.wixstatic.com/media/6588f2_24e4126d37144f21863c7c78faba9f93~mv2.jpg" alt="Project 2" 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>
+            <p class="text-gray-600 mb-4">Take control of a powerful mech and engage in intense combat scenarios</p>
+            <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
+                View Project
+                <i data-feather="arrow-right" class="ml-2"></i>
+            </a>
+        </div>
+    </div>
+                        <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
+<img src="http://static.photos/art/640x360/42" alt="Art Project 1" 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>
+            <p class="text-gray-600 mb-4">A series of character concepts for fantasy RPG game</p>
+            <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
+                View Project
+                <i data-feather="arrow-right" class="ml-2"></i>
+            </a>
+        </div>
+    </div>
+                        <div class="project-card bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition">
+<img src="http://static.photos/art/640x360/43" alt="Art Project 2" class="w-full h-48 object-cover">
+        <div class="p-6">
+            <h2 class="text-2xl font-bold mb-2">Environment Art</h2>
+            <h3 class="text-xl font-semibold mb-2">Fantasy landscapes</h3>
+            <p class="text-gray-600 mb-4">Digital paintings of magical environments and world-building</p>
+            <a href="#" class="text-red-600 hover:text-red-800 font-medium inline-flex items-center">
+                View Project
+                <i data-feather="arrow-right" class="ml-2"></i>
+            </a>
+        </div>
+    </div>
+</div>
                 </div>
 </div>
 <!-- Games Column (Filtered State) -->