diff --git a/docs/en/index.md b/docs/en/index.md
index 1ba5303..663beb4 100644
--- a/docs/en/index.md
+++ b/docs/en/index.md
@@ -144,4 +144,26 @@ hero:
   color: var(--vp-c-text-2);
   line-height: 1.6;
 }
+@media (max-width: 768px) {
+  .vp-doc .cards {
+    grid-template-columns: 1fr;
+    padding: 0 20px 32px;
+  }
+  .vp-doc .features {
+    grid-template-columns: 1fr;
+    padding: 0 20px 48px;
+  }
+  .vp-doc .card-icon {
+    padding: 40px 0;
+    font-size: 36px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px) {
+  .vp-doc .cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .vp-doc .features {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>
diff --git a/docs/index.md b/docs/index.md
index 19d4782..8de9f94 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -159,4 +159,26 @@ hero:
   color: var(--vp-c-text-2);
   line-height: 1.6;
 }
+@media (max-width: 768px) {
+  .vp-doc .cards {
+    grid-template-columns: 1fr;
+    padding: 0 20px 32px;
+  }
+  .vp-doc .features {
+    grid-template-columns: 1fr;
+    padding: 0 20px 48px;
+  }
+  .vp-doc .card-icon {
+    padding: 40px 0;
+    font-size: 36px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px) {
+  .vp-doc .cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .vp-doc .features {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>
diff --git a/docs/ja/index.md b/docs/ja/index.md
index 1c029fb..eaaa15d 100644
--- a/docs/ja/index.md
+++ b/docs/ja/index.md
@@ -144,4 +144,26 @@ hero:
   color: var(--vp-c-text-2);
   line-height: 1.6;
 }
+@media (max-width: 768px) {
+  .vp-doc .cards {
+    grid-template-columns: 1fr;
+    padding: 0 20px 32px;
+  }
+  .vp-doc .features {
+    grid-template-columns: 1fr;
+    padding: 0 20px 48px;
+  }
+  .vp-doc .card-icon {
+    padding: 40px 0;
+    font-size: 36px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px) {
+  .vp-doc .cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .vp-doc .features {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>
diff --git a/docs/zh/index.md b/docs/zh/index.md
index 1714f3e..9146fa1 100644
--- a/docs/zh/index.md
+++ b/docs/zh/index.md
@@ -144,4 +144,26 @@ hero:
   color: var(--vp-c-text-2);
   line-height: 1.6;
 }
+@media (max-width: 768px) {
+  .vp-doc .cards {
+    grid-template-columns: 1fr;
+    padding: 0 20px 32px;
+  }
+  .vp-doc .features {
+    grid-template-columns: 1fr;
+    padding: 0 20px 48px;
+  }
+  .vp-doc .card-icon {
+    padding: 40px 0;
+    font-size: 36px;
+  }
+}
+@media (min-width: 769px) and (max-width: 1024px) {
+  .vp-doc .cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .vp-doc .features {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
 </style>