feat: add responsive image for mobile demo and adjust minor styling

Author: Bharath-code

docs/git-scope-demo-mobile-1.webp

@@ -435,7 +435,7 @@
         }
 
         .card-icon {
-            color: var(--primary);
+            color: #E9D5FF;
             background: rgba(139, 92, 246, 0.1);
             padding: 0.5rem;
             border-radius: 8px;
@@ -693,11 +693,11 @@ <h2 style="font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 2rem; font-weight
 
                     <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                         <img src="https://img.shields.io/badge/Written_in-Go-00ADD8?style=flat-square&logo=go"
-                            alt="Written in Go" width="90" height="20">
+                            alt="Written in Go" height="20">
                         <img src="https://img.shields.io/badge/License-MIT-green?style=flat-square" alt="MIT License"
-                            width="80" height="20">
+                            height="20">
                         <img src="https://img.shields.io/badge/Speed-Blazing_Fast-f9bf2d?style=flat-square"
-                            alt="Blazing Fast" width="90" height="20">
+                            alt="Blazing Fast" height="20">
                     </div>
                 </div>
             </section>
@@ -710,6 +710,7 @@ <h2 style="font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 2rem; font-weight
                         <div class="dot green"></div>
                     </div>
                     <picture>
+                        <source media="(max-width: 768px)" srcset="git-scope-demo-mobile-1.webp" type="image/webp">
                         <source srcset="git-scope-demo-1.webp" type="image/webp">
                         <img src="demo-static.png" alt="Git Scope Demo" loading="lazy" width="1200" height="800"
                             style="width: 100%; height: auto; display: block;" decoding="async" fetchpriority="low">