diff --git a/docs/index.md b/docs/index.md
index 5193ff7..3fb239a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,8 +13,8 @@ hide:
 
 <div class="grid" markdown>
 <figure style="margin: 0 auto" markdown>
-  <div style="width: 350px; max-width: 100vw; height: 160px; position: absolute;">
-    <span style="top: 50%; width: 50%; height: 80px; position: absolute; background-image: var(--hero-background-image); filter: blur(68px); transform: translate(-50%, -50%);">
+  <div class="hero">
+    <span class="hero-background">
     </span>
   </div>
   <img src="/assets/images/brand/light/2.png#only-light" alt="LinuxMirrors" style="width: 300px" />
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 1081373..b6c393b 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -157,6 +157,31 @@
     vertical-align: -0.35em !important;
 }
 
+/* HERO */
+.hero {
+    width: 390px;
+    max-width: 100vw;
+    height: 160px;
+    position: absolute;
+    margin: 0 auto;
+}
+
+.hero-background {
+    top: 50%;
+    width: 50%;
+    height: 80px;
+    position: absolute;
+    background-image: var(--hero-background-image);
+    filter: blur(68px);
+    transform: translate(-50%, -50%);
+}
+
+@media screen and (max-width: 768px) {
+    .hero {
+        width: calc(100% - .8rem - 40px);
+    }
+}
+
 /* 赞助组件 */
 .sponsor {
     padding-top: 1rem;