docs: improve responsive design for the cover

Author: devopvoid

docs/assets/styles.css

@@ -75,11 +75,16 @@
 .cover .feature-text {
     font-size: 16px;
     line-height: 1.4;
+    text-align: left;
     margin: 0;
 }
 
 /* Media queries for responsive design */
 @media screen and (max-width: 768px) {
+    .cover img {
+        width: 250px;
+    }
+
     .cover .buttons {
         gap: 15px;
     }
@@ -109,21 +114,7 @@
     }
 }
 
-@media screen and (max-width: 480px) {
-    .cover .buttons {
-        flex-direction: column;
-        align-items: center;
-        gap: 12px;
-    }
-
-    .cover .buttons a {
-        padding: 8px 16px;
-        font-size: 0.9rem;
-        width: 80%;
-        max-width: 200px;
-        text-align: center;
-    }
-
+@media screen and (max-width: 576px) {
     .cover .features-list {
         max-width: 95%;
         grid-gap: 4px;
@@ -144,6 +135,26 @@
     }
 }
 
+@media screen and (max-width: 480px) {
+    .cover img {
+        width: 200px;
+    }
+
+    .cover .buttons {
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .cover .buttons a {
+        padding: 8px 16px;
+        font-size: 0.9rem;
+        width: 80%;
+        max-width: 200px;
+        text-align: center;
+    }
+}
+
 /* Additional styles for the sidebar */
 .sidebar .app-name-link img {
     max-width: 50%;