Responsive items

packages/docs/src/index.md

@@ -100,10 +100,8 @@ TODO: When we have docs public, move this back into the top config section above
 </div>
 
 <style scoped>
-
 /* Alert Banner */
 .alert-banner {
-
   padding: 12px 20px;
   text-align: center;
   font-size: 14px;
@@ -116,8 +114,27 @@ TODO: When we have docs public, move this back into the top config section above
   font-weight: bold;
 }
 
+/* Default Grid Layout for larger screens */
 .items {
-  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+}
+
+/* Medium Screens (e.g., tablets) */
+@media (max-width: 1024px) {
+  .items {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30px;
+  }
+}
+
+/* Small Screens (e.g., mobile devices) */
+@media (max-width: 768px) {
+  .items {
+    grid-template-columns: repeat(1, 1fr);
+    gap: 20px;
+  }
 }
 
 .VPFeature {
@@ -187,4 +204,4 @@ TODO: When we have docs public, move this back into the top config section above
 .link-text-icon {
   margin-left: 6px;
 }
-</style>
+</style>