Make feature cards more compact with horizontal layout

- Changed from vertical to horizontal layout with emoji on left
- Reduced card padding from 2.5rem to 1.5rem for compactness
- Made emojis smaller (3.5rem) and placed in rounded background
- Adjusted typography sizes for better hierarchy
- Added hover effect on emoji (scales and changes to gradient)
- Improved grid layout with better responsive breakpoints
- Consistent with other card styles on the site

Author: sahithvibudhi

src/components/Features.astro

@@ -56,14 +56,13 @@ const features = [
           class="feature-card" 
           style={`animation-delay: ${index * 0.1}s`}
         >
-          <div class="feature-icon-wrapper">
-            <div class={`feature-icon-gradient bg-gradient-to-br ${feature.gradient}`}></div>
+          <div class="feature-content">
             <div class="feature-icon">{feature.icon}</div>
+            <div class="feature-text">
+              <h3 class="feature-title">{feature.title}</h3>
+              <p class="feature-description">{feature.description}</p>
+            </div>
           </div>
-          
-          <h3 class="feature-title">{feature.title}</h3>
-          <p class="feature-description">{feature.description}</p>
-          
           <div class="feature-hover-effect"></div>
         </div>
       ))}
@@ -83,9 +82,21 @@ const features = [
 <style>
   .features-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-    gap: 2rem;
-    margin-top: 4rem;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-top: 3rem;
+  }
+  
+  @media (min-width: 768px) {
+    .features-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+  
+  @media (min-width: 1200px) {
+    .features-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
   }
 
   .feature-card {
@@ -135,6 +146,12 @@ const features = [
     opacity: 1;
   }
 
+  .feature-card:hover .feature-icon {
+    transform: scale(1.1);
+    background: var(--gradient-primary);
+    color: white;
+  }
+  
   .feature-hover-effect {
     position: absolute;
     inset: -50%;
@@ -149,45 +166,44 @@ const features = [
     opacity: 0.1;
   }
 
-  .feature-icon-wrapper {
+  .feature-content {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
     position: relative;
-    width: 80px;
-    height: 80px;
-    margin-bottom: 1.5rem;
-  }
-  
-  .feature-icon-gradient {
-    position: absolute;
-    inset: 0;
-    border-radius: 1rem;
-    opacity: 0.2;
-    filter: blur(20px);
-    transform: scale(1.2);
+    z-index: 1;
   }
 
   .feature-icon {
-    position: relative;
-    width: 100%;
-    height: 100%;
+    font-size: 2.5rem;
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 2.5rem;
+    width: 3.5rem;
+    height: 3.5rem;
     background: var(--color-bg-secondary);
-    border-radius: 1rem;
+    border-radius: 0.75rem;
     box-shadow: var(--shadow-sm);
+    transition: all var(--transition-base);
+  }
+  
+  .feature-text {
+    flex: 1;
   }
 
   .feature-title {
-    font-size: 1.5rem;
+    font-size: 1.125rem;
     font-weight: 600;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.25rem;
     color: var(--color-text);
   }
 
   .feature-description {
     color: var(--color-text-secondary);
-    line-height: 1.6;
+    line-height: 1.5;
+    font-size: 0.875rem;
+    margin: 0;
   }
 
   .gradient-text {