update styles

assets/css/style.css

@@ -1044,29 +1044,44 @@ a:hover {
 
 /* Recent Posts */
 .recent-posts {
-    margin-bottom: 3rem;
+    margin: 4rem 0 5rem;
+    padding: 3rem;
+    background-color: var(--header-bg);
+    border-radius: 16px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    border: 1px solid var(--border-color);
 }
 
 .posts-list {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 3rem;
+    margin: 3rem 0;
 }
 
 .post-item {
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid #eee;
+    padding: 2.5rem;
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    background-color: var(--bg-color);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.post-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
 }
 
 .post-item:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 2.5rem;
 }
 
 .post-meta {
     color: var(--text-color);
     font-size: 0.9rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
+    opacity: 0.8;
 }
 
 .post-meta .separator {
@@ -1085,7 +1100,7 @@ a:hover {
 .post-title {
     color: var(--text-color);
     font-size: 1.75rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1rem;
     line-height: 1.3;
 }
 
@@ -1162,6 +1177,38 @@ a:hover {
     .section-header h2 {
         font-size: 1.3rem;
     }
+
+    .recent-posts {
+        margin: 3rem 0 4rem;
+        padding: 2rem;
+    }
+
+    .posts-list {
+        gap: 2.5rem;
+        margin: 2rem 0;
+    }
+
+    .post-item {
+        padding: 2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .recent-posts {
+        margin: 2rem 0 3rem;
+        padding: 1.5rem;
+        border-radius: 12px;
+    }
+
+    .posts-list {
+        gap: 2rem;
+        margin: 1.5rem 0;
+    }
+
+    .post-item {
+        padding: 1.5rem;
+        border-radius: 12px;
+    }
 }
 
 /* Statistics Section */