diff --git a/docs-shared/src/components/HopeHero.ts b/docs-shared/src/components/HopeHero.ts
index 73b560b457a1..0ada0c3ebbac 100644
--- a/docs-shared/src/components/HopeHero.ts
+++ b/docs-shared/src/components/HopeHero.ts
@@ -1,11 +1,11 @@
 import { h } from "vue";
 import type { FunctionalComponent, VNode } from "vue";
 
-import HomeHero from "vuepress-theme-hope/components/HomeHero.js";
+import HeroInfo from "vuepress-theme-hope/components/HeroInfo.js";
 import HopeLogo from "./HopeLogo.js";
 
 const HopeHero: FunctionalComponent = (): VNode =>
-  h(HomeHero, {}, { heroImage: () => h(HopeLogo) });
+  h(HeroInfo, {}, { heroImage: () => h(HopeLogo) });
 
 HopeHero.displayName = "HopeHero";
 
diff --git a/docs-shared/src/config-wrapper.ts b/docs-shared/src/config-wrapper.ts
index 67d3f2abe69c..5ca723abc8b4 100644
--- a/docs-shared/src/config-wrapper.ts
+++ b/docs-shared/src/config-wrapper.ts
@@ -98,7 +98,7 @@ export const config = (
 
     alias: {
       "@NetlifyBadge": path.resolve(__dirname, "./components/NetlifyBadge.js"),
-      "@theme-hope/components/HomeHero": path.resolve(
+      "@theme-hope/components/HeroInfo": path.resolve(
         __dirname,
         "./components/HopeHero.js"
       ),
diff --git a/docs/theme/src/cookbook/advanced/replace.md b/docs/theme/src/cookbook/advanced/replace.md
index 436ec5ae1299..85f17bfafcd6 100644
--- a/docs/theme/src/cookbook/advanced/replace.md
+++ b/docs/theme/src/cookbook/advanced/replace.md
@@ -80,8 +80,8 @@ Components:
 - `@theme-hope/components/AutoLink`: basic link
 - `@theme-hope/components/BreadCrumb`: breadcrumb
 - `@theme-hope/components/CommonWrapper`: basic layout integration
-- `@theme-hope/components/HomeFeatures`: homepage features
-- `@theme-hope/components/HomeHero`: homepage logo and introduction
+- `@theme-hope/components/FeaturePanel`: homepage features
+- `@theme-hope/components/HeroInfo`: homepage logo and introduction
 - `@theme-hope/components/HomePage`: home page
 - `@theme-hope/components/Icon`: icon
 - `@theme-hope/components/MarkdownContent`: Markdown content
@@ -283,7 +283,7 @@ Components that provide slots are as follows:
 
 - `AutoLink`: `default`, `before`, `after`
 - `CommonWrapper`: `default`, `navbarLeftStart`, `navbarLeftEnd`, `navbarCenterStart`, `navbarCenterEnd`, `navbarRightStart`, `navbarRightEnd`, `navScreenTop`, `navScreenBottom`, `sidebar`, `sidebarTop`, `sidebarBottom`
-- `HomeHero`: `heroImage`, `heroInfo`
+- `HeroInfo`: `heroImage`, `heroInfo`
 - `HomePage`: `top`, `center`, `bottom`
 - `NormalPage`: `top`, `contentBefore`, `contentAfter`, `bottom`
 
diff --git a/docs/theme/src/ru/cookbook/advanced/replace.md b/docs/theme/src/ru/cookbook/advanced/replace.md
index a5ddf38cdaf2..03d0ca08dc13 100644
--- a/docs/theme/src/ru/cookbook/advanced/replace.md
+++ b/docs/theme/src/ru/cookbook/advanced/replace.md
@@ -80,8 +80,8 @@ export default {
 - `@theme-hope/components/AutoLink`: основная ссылка
 - `@theme-hope/components/BreadCrumb`: хлебная крошка
 - `@theme-hope/components/CommonWrapper`: базовая интеграция макета
-- `@theme-hope/components/HomeFeatures`: функции главной страницы
-- `@theme-hope/components/HomeHero`: логотип главной страницы и введение
+- `@theme-hope/components/FeaturePanel`: функции главной страницы
+- `@theme-hope/components/HeroInfo`: логотип главной страницы и введение
 - `@theme-hope/components/HomePage`: главная страница
 - `@theme-hope/components/Icon`: иконка
 - `@theme-hope/components/MarkdownContent`: контент разметки
@@ -285,7 +285,7 @@ import HopeHomePage from "vuepress-theme-hope/components/HomePage.js";
 
 - `AutoLink`: `default`, `before`, `after`
 - `CommonWrapper`: `default`, `navbarLeftStart`, `navbarLeftEnd`, `navbarCenterStart`, `navbarCenterEnd`, `navbarRightStart`, `navbarRightEnd`, `navScreenTop`, `navScreenBottom`, `sidebar`, `sidebarTop`, `sidebarBottom`
-- `HomeHero`: `heroImage`, `heroInfo`
+- `HeroInfo`: `heroImage`, `heroInfo`
 - `HomePage`: `top`, `center`, `bottom`
 - `NormalPage`: `top`, `contentBefore`, `contentAfter`, `bottom`
 
diff --git a/docs/theme/src/zh/cookbook/advanced/replace.md b/docs/theme/src/zh/cookbook/advanced/replace.md
index 188629f32938..732bf96e8f55 100644
--- a/docs/theme/src/zh/cookbook/advanced/replace.md
+++ b/docs/theme/src/zh/cookbook/advanced/replace.md
@@ -82,8 +82,8 @@ export default {
 - `@theme-hope/components/AutoLink` 基础链接
 - `@theme-hope/components/BreadCrumb` 路径导航
 - `@theme-hope/components/CommonWrapper` 基本布局整合
-- `@theme-hope/components/HomeFeatures` 主页特性
-- `@theme-hope/components/HomeHero` 主页 Logo 及介绍
+- `@theme-hope/components/FeaturePanel` 主页特性
+- `@theme-hope/components/HeroInfo` 主页 Logo 及介绍
 - `@theme-hope/components/HomePage` 主页
 - `@theme-hope/components/Icon` 图标
 - `@theme-hope/components/MarkdownContent` Markdown 内容
@@ -286,7 +286,7 @@ import HopeHomePage from "vuepress-theme-hope/components/HomePage.js";
 
 - `AutoLink`: `default`, `before`, `after`
 - `CommonWrapper`: `default`, `navbarLeftStart`, `navbarLeftEnd`, `navbarCenterStart`, `navbarCenterEnd`, `navbarRightStart`, `navbarRightEnd`, `navScreenTop`, `navScreenBottom`, `sidebar`, `sidebarTop`, `sidebarBottom`
-- `HomeHero`: `heroImage`, `heroInfo`
+- `HeroInfo`: `heroImage`, `heroInfo`
 - `HomePage`: `top`, `center`, `bottom`
 - `NormalPage`: `top`, `contentBefore`, `contentAfter`, `bottom`
 
diff --git a/packages/theme/src/client/components/FeaturePanel.ts b/packages/theme/src/client/components/FeaturePanel.ts
new file mode 100644
index 000000000000..2ef74993b48a
--- /dev/null
+++ b/packages/theme/src/client/components/FeaturePanel.ts
@@ -0,0 +1,82 @@
+import { isLinkExternal } from "@vuepress/shared";
+import { defineComponent, h } from "vue";
+import { RouterLink } from "vue-router";
+
+import Icon from "@theme-hope/components/Icon";
+
+import type { PropType, VNode } from "vue";
+import type { ThemeProjectHomeFeatureItemOptions } from "../../shared/index.js";
+
+import "../styles/feature-panel.scss";
+
+export default defineComponent({
+  name: "FeaturePanel",
+
+  props: {
+    /**
+     * Feature config
+     */
+    items: {
+      type: Object as PropType<ThemeProjectHomeFeatureItemOptions[]>,
+      default: (): ThemeProjectHomeFeatureItemOptions[] =>
+        [] as ThemeProjectHomeFeatureItemOptions[],
+    },
+
+    /**
+     * Feature header
+     */
+    header: {
+      type: String,
+      default: "",
+    },
+  },
+
+  setup(props) {
+    return (): VNode =>
+      h("div", { class: "feature-panel" }, [
+        props.header
+          ? h("h2", { class: "feature-header" }, props.header)
+          : null,
+        props.items.length
+          ? h(
+              "div",
+              { class: "features" },
+              props.items.map((feature) => {
+                const children = [
+                  h("h3", [
+                    h(Icon, { icon: feature.icon }),
+                    h("span", { innerHTML: feature.title }),
+                  ]),
+                  h("p", { innerHTML: feature.details }),
+                ];
+
+                return feature.link
+                  ? isLinkExternal(feature.link)
+                    ? h(
+                        "a",
+                        {
+                          class: "feature link",
+                          href: feature.link,
+                          role: "navigation",
+                          "aria-label": feature.title,
+                          target: "_blank",
+                        },
+                        children
+                      )
+                    : h(
+                        RouterLink,
+                        {
+                          class: "feature link",
+                          to: feature.link,
+                          role: "navigation",
+                          "aria-label": feature.title,
+                        },
+                        () => children
+                      )
+                  : h("div", { class: "feature" }, children);
+              })
+            )
+          : null,
+      ]);
+  },
+});
diff --git a/packages/theme/src/client/components/HomeHero.ts b/packages/theme/src/client/components/HeroInfo.ts
similarity index 96%
rename from packages/theme/src/client/components/HomeHero.ts
rename to packages/theme/src/client/components/HeroInfo.ts
index f4564fa1e9d4..d43b35a071bc 100644
--- a/packages/theme/src/client/components/HomeHero.ts
+++ b/packages/theme/src/client/components/HeroInfo.ts
@@ -11,8 +11,10 @@ import DropTransition from "@theme-hope/components/transitions/DropTransition";
 import type { VNode } from "vue";
 import type { ThemeProjectHomePageFrontmatter } from "../../shared/index.js";
 
+import "../styles/hero-info.scss";
+
 export default defineComponent({
-  name: "HomeHero",
+  name: "HeroInfo",
 
   setup(_props, { slots }) {
     const frontmatter = usePageFrontmatter<ThemeProjectHomePageFrontmatter>();
@@ -53,7 +55,7 @@ export default defineComponent({
     const actions = computed(() => frontmatter.value.actions ?? []);
 
     return (): VNode =>
-      h("header", { class: "hero" }, [
+      h("header", { class: "hero-info-wrapper" }, [
         slots["heroImage"]?.() ||
           h(DropTransition, { appear: true, type: "group" }, () => [
             heroImage.value
diff --git a/packages/theme/src/client/components/HomeFeatures.ts b/packages/theme/src/client/components/HomeFeatures.ts
deleted file mode 100644
index 9537315e1d05..000000000000
--- a/packages/theme/src/client/components/HomeFeatures.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { isLinkExternal } from "@vuepress/shared";
-import { defineComponent, h } from "vue";
-import { RouterLink } from "vue-router";
-
-import Icon from "@theme-hope/components/Icon";
-
-import type { PropType, VNode } from "vue";
-import type { ThemeProjectHomeFeatureItemOptions } from "../../shared/index.js";
-
-export default defineComponent({
-  name: "HomeFeatures",
-
-  props: {
-    /**
-     * Feature config
-     */
-    items: {
-      type: Object as PropType<ThemeProjectHomeFeatureItemOptions[]>,
-      default: (): ThemeProjectHomeFeatureItemOptions[] =>
-        [] as ThemeProjectHomeFeatureItemOptions[],
-    },
-
-    /**
-     * Feature header
-     */
-    header: {
-      type: String,
-      default: "",
-    },
-  },
-
-  setup(props) {
-    return (): (VNode | null)[] => [
-      props.header ? h("h3", props.header) : null,
-      props.items.length
-        ? h(
-            "div",
-            { class: "features" },
-            props.items.map((feature) => {
-              const children = [
-                h("h2", [
-                  h(Icon, { icon: feature.icon }),
-                  h("span", { innerHTML: feature.title }),
-                ]),
-                h("p", { innerHTML: feature.details }),
-              ];
-
-              return feature.link
-                ? isLinkExternal(feature.link)
-                  ? h(
-                      "a",
-                      {
-                        class: "feature link",
-                        href: feature.link,
-                        role: "navigation",
-                        "aria-label": feature.title,
-                        target: "_blank",
-                      },
-                      children
-                    )
-                  : h(
-                      RouterLink,
-                      {
-                        class: "feature link",
-                        to: feature.link,
-                        role: "navigation",
-                        "aria-label": feature.title,
-                      },
-                      () => children
-                    )
-                : h("div", { class: "feature" }, children);
-            })
-          )
-        : null,
-    ];
-  },
-});
diff --git a/packages/theme/src/client/components/HomePage.ts b/packages/theme/src/client/components/HomePage.ts
index 21aa32d01640..1decdf2f4342 100644
--- a/packages/theme/src/client/components/HomePage.ts
+++ b/packages/theme/src/client/components/HomePage.ts
@@ -3,9 +3,9 @@ import { usePageFrontmatter } from "@vuepress/client";
 import { isArray } from "@vuepress/shared";
 
 import DropTransition from "@theme-hope/components/transitions/DropTransition";
-import HomeFeatures from "@theme-hope/components/HomeFeatures";
+import FeaturePanel from "@theme-hope/components/FeaturePanel";
+import HeroInfo from "@theme-hope/components/HeroInfo";
 import MarkdownContent from "@theme-hope/components/MarkdownContent";
-import HomeHero from "@theme-hope/components/HomeHero";
 import { usePure } from "@theme-hope/composables/index";
 
 import type { VNode } from "vue";
@@ -46,12 +46,12 @@ export default defineComponent({
         },
         [
           slots["top"]?.(),
-          h(HomeHero),
+          h(HeroInfo),
           features.value.map(({ header = "", items }, index) =>
             h(
               DropTransition,
               { appear: true, delay: 0.16 + index * 0.08 },
-              () => h(HomeFeatures, { header, items })
+              () => h(FeaturePanel, { header, items })
             )
           ),
           slots["center"]?.(),
diff --git a/packages/theme/src/client/styles/feature-panel.scss b/packages/theme/src/client/styles/feature-panel.scss
new file mode 100644
index 000000000000..43ec40331e3c
--- /dev/null
+++ b/packages/theme/src/client/styles/feature-panel.scss
@@ -0,0 +1,155 @@
+@keyframes bounce {
+  0% {
+    transform: scale(1) translateY(0);
+  }
+
+  10% {
+    transform: scale(
+        var(--bounce-start-scale-x, 1.1),
+        var(--bounce-start-scale-y, 0.9)
+      )
+      translateY(0);
+  }
+
+  30% {
+    transform: scale(
+        var(--bounce-jump-scale-x, 0.9),
+        var(--bounce-jump-scale-y, 1.1)
+      )
+      translateY(var(--bounce-height, -0.5em));
+  }
+
+  50% {
+    transform: scale(
+        var(--bounce-land-scale-x, 1.05),
+        var(--bounce-land-scale-y, 0.95)
+      )
+      translateY(0);
+  }
+
+  57% {
+    transform: scale(1) translateY(var(--bounce-rebound, -0.125em));
+  }
+
+  64% {
+    transform: scale(1) translateY(0);
+  }
+
+  100% {
+    transform: scale(1) translateY(0);
+  }
+}
+
+.feature-panel {
+  margin: 0 -1rem;
+  padding: 1.2rem 0;
+
+  @media (max-width: hope-config.$mobile) {
+    margin: 0 -0.5rem;
+  }
+
+  .feature-header {
+    margin: 0 1.75rem;
+  }
+
+  .features {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: stretch;
+    align-items: stretch;
+    justify-content: center;
+
+    @media print {
+      display: block;
+    }
+
+    &:first-child {
+      border-top: 1px solid var(--border-color);
+      transition: border-color var(--color-transition);
+    }
+  }
+
+  .feature {
+    position: relative;
+
+    flex-basis: calc(33% - 3rem);
+
+    margin: 0.5rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+
+    transition: background var(--color-transition),
+      box-shadow var(--color-transition), transform var(--transform-transition);
+
+    @media (min-width: hope-config.$pc) {
+      flex-basis: calc(25% - 3rem);
+    }
+
+    @media (max-width: hope-config.$pad) {
+      flex-basis: calc(50% - 3rem);
+    }
+
+    @media (max-width: hope-config.$tablet) {
+      font-size: 0.95rem;
+    }
+
+    @media (max-width: hope-config.$mobile) {
+      flex-basis: calc(100%);
+      margin: 0.5rem 0;
+      font-size: 0.9rem;
+    }
+
+    &.link {
+      cursor: pointer;
+
+      @media print {
+        text-decoration: none;
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      margin-inline-end: 0.5rem;
+      color: var(--theme-color);
+      font-size: 1.1em;
+    }
+
+    &:hover {
+      background-color: var(--bg-color-secondary);
+      box-shadow: 0 2px 12px 0 var(--card-shadow);
+      transform: scale(1.05);
+
+      // stylelint-disable-next-line
+      .home.project:not(.pure) & {
+        // stylelint-disable-next-line
+        .icon {
+          animation-name: bounce;
+          animation-duration: var(--fa-animation-duration, 1s);
+          animation-timing-function: var(
+            --fa-animation-timing,
+            cubic-bezier(0.28, 0.84, 0.42, 1)
+          );
+          animation-delay: var(--fa-animation-delay, 0s);
+          animation-direction: var(--fa-animation-direction, normal);
+        }
+      }
+    }
+
+    h3 {
+      margin: 0.25rem 0 0.5rem;
+      color: var(--text-color-light);
+      font-weight: bold;
+      font-size: 1.3rem;
+
+      @media (max-width: hope-config.$mobile) {
+        font-size: 1.2rem;
+      }
+    }
+
+    p {
+      margin: 0;
+      color: var(--text-color-lighter);
+      line-height: 1.4;
+    }
+  }
+}
diff --git a/packages/theme/src/client/styles/hero-info.scss b/packages/theme/src/client/styles/hero-info.scss
new file mode 100644
index 000000000000..4ea45527e48e
--- /dev/null
+++ b/packages/theme/src/client/styles/hero-info.scss
@@ -0,0 +1,151 @@
+@use "sass:color";
+@use "sass:list";
+
+.hero-info-wrapper {
+  @media (min-width: hope-config.$pad) {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    max-height: 280px;
+    margin: 0;
+
+    @media (max-width: hope-config.$pad) {
+      margin: 3rem auto 1.5rem;
+    }
+
+    @media (max-width: hope-config.$tablet) {
+      max-height: 240px;
+      margin: 2rem auto 1.2rem;
+    }
+
+    @media (max-width: hope-config.$mobile) {
+      max-height: 210px;
+      margin: 1.5rem auto 1rem;
+    }
+
+    &.light {
+      display: block;
+
+      #{hope-config.$dark-selector} & {
+        display: none;
+      }
+    }
+
+    &.dark {
+      display: none;
+
+      #{hope-config.$dark-selector} & {
+        display: block;
+      }
+    }
+  }
+
+  h1,
+  .description,
+  .actions {
+    margin: 1.8rem 0;
+
+    @media (max-width: hope-config.$tablet) {
+      margin: 1.5rem 0;
+    }
+
+    @media (max-width: hope-config.$pad) {
+      margin: 1.5rem auto;
+      text-align: center;
+    }
+
+    @media (max-width: hope-config.$mobile) {
+      margin: 1.2rem 0;
+    }
+  }
+
+  h1 {
+    font-size: 3.6rem;
+    font-family: var(--font-family-fancy);
+
+    @media (max-width: hope-config.$tablet) {
+      font-size: 2.5rem;
+    }
+
+    @media (max-width: hope-config.$mobile) {
+      font-size: 2rem;
+    }
+  }
+
+  .description {
+    max-width: 35rem;
+
+    color: var(--text-color-bright);
+
+    font-weight: 500;
+    font-size: 1.6rem;
+    line-height: 1.3;
+
+    @media (max-width: hope-config.$tablet) {
+      font-size: 1.4rem;
+    }
+
+    @media (max-width: hope-config.$mobile) {
+      font-size: 1.2rem;
+    }
+  }
+
+  .action-button {
+    display: inline-block;
+
+    overflow: hidden;
+
+    margin: 0.5rem;
+    padding: 0.5em 1.5rem;
+    border: 1px solid var(--text-color);
+    border-radius: 2rem;
+
+    background: var(--bg-color-secondary);
+    color: var(--text-color);
+
+    font-size: 1.2rem;
+
+    transition: color var(--color-transition), color var(--color-transition),
+      transform var(--transform-transition);
+
+    @media (max-width: hope-config.$tablet) {
+      padding: 0.8rem 1.2rem;
+      font-size: 1.1rem;
+    }
+
+    @media (max-width: hope-config.$mobile) {
+      font-size: 1rem;
+    }
+
+    @media print {
+      text-decoration: none;
+    }
+
+    &:hover {
+      border-color: var(--text-color-bright);
+      color: var(--text-color-bright);
+    }
+
+    &.primary {
+      border-color: var(--theme-color);
+      background: var(--theme-color);
+      color: var(--white);
+
+      // stylelint-disable max-nesting-depth
+      &:hover {
+        border-color: var(--theme-color-light);
+        background: var(--theme-color-light);
+      }
+      // stylelint-enable max-nesting-depth
+    }
+
+    .home.project:not(.pure) &:active {
+      transform: scale(0.96);
+    }
+  }
+}
diff --git a/packages/theme/src/client/styles/home-page.scss b/packages/theme/src/client/styles/home-page.scss
index 3aa89d30f49a..dfaf1dd8190c 100644
--- a/packages/theme/src/client/styles/home-page.scss
+++ b/packages/theme/src/client/styles/home-page.scss
@@ -1,48 +1,3 @@
-@use "sass:color";
-@use "sass:list";
-
-@keyframes bounce {
-  0% {
-    transform: scale(1) translateY(0);
-  }
-
-  10% {
-    transform: scale(
-        var(--bounce-start-scale-x, 1.1),
-        var(--bounce-start-scale-y, 0.9)
-      )
-      translateY(0);
-  }
-
-  30% {
-    transform: scale(
-        var(--bounce-jump-scale-x, 0.9),
-        var(--bounce-jump-scale-y, 1.1)
-      )
-      translateY(var(--bounce-height, -0.5em));
-  }
-
-  50% {
-    transform: scale(
-        var(--bounce-land-scale-x, 1.05),
-        var(--bounce-land-scale-y, 0.95)
-      )
-      translateY(0);
-  }
-
-  57% {
-    transform: scale(1) translateY(var(--bounce-rebound, -0.125em));
-  }
-
-  64% {
-    transform: scale(1) translateY(0);
-  }
-
-  100% {
-    transform: scale(1) translateY(0);
-  }
-}
-
 .home.project {
   display: block;
 
@@ -55,259 +10,6 @@
     padding-inline: 1.5rem;
   }
 
-  .hero {
-    @media (min-width: hope-config.$pad) {
-      display: flex;
-      align-items: center;
-      justify-content: space-evenly;
-    }
-
-    img {
-      display: block;
-      max-width: 100%;
-      max-height: 280px;
-      margin: 0;
-
-      @media (max-width: hope-config.$pad) {
-        margin: 3rem auto 1.5rem;
-      }
-
-      @media (max-width: hope-config.$tablet) {
-        max-height: 240px;
-        margin: 2rem auto 1.2rem;
-      }
-
-      @media (max-width: hope-config.$mobile) {
-        max-height: 210px;
-        margin: 1.5rem auto 1rem;
-      }
-
-      &.light {
-        display: block;
-
-        #{hope-config.$dark-selector} & {
-          display: none;
-        }
-      }
-
-      &.dark {
-        display: none;
-
-        #{hope-config.$dark-selector} & {
-          display: block;
-        }
-      }
-    }
-
-    h1,
-    .description,
-    .actions {
-      margin: 1.8rem 0;
-
-      @media (max-width: hope-config.$tablet) {
-        margin: 1.5rem 0;
-      }
-
-      @media (max-width: hope-config.$pad) {
-        margin: 1.5rem auto;
-        text-align: center;
-      }
-
-      @media (max-width: hope-config.$mobile) {
-        margin: 1.2rem 0;
-      }
-    }
-
-    h1 {
-      font-size: 3.6rem;
-      font-family: var(--font-family-fancy);
-
-      @media (max-width: hope-config.$tablet) {
-        font-size: 2.5rem;
-      }
-
-      @media (max-width: hope-config.$mobile) {
-        font-size: 2rem;
-      }
-    }
-
-    .description {
-      max-width: 35rem;
-
-      color: var(--text-color-bright);
-
-      font-weight: 500;
-      font-size: 1.6rem;
-      line-height: 1.3;
-
-      @media (max-width: hope-config.$tablet) {
-        font-size: 1.4rem;
-      }
-
-      @media (max-width: hope-config.$mobile) {
-        font-size: 1.2rem;
-      }
-    }
-
-    .action-button {
-      display: inline-block;
-
-      overflow: hidden;
-
-      margin: 0.5rem;
-      padding: 0.5em 1.5rem;
-      border: 1px solid var(--text-color);
-      border-radius: 2rem;
-
-      background: var(--bg-color-secondary);
-      color: var(--text-color);
-
-      font-size: 1.2rem;
-
-      transition: color var(--color-transition), color var(--color-transition),
-        transform var(--transform-transition);
-
-      @media (max-width: hope-config.$tablet) {
-        padding: 0.8rem 1.2rem;
-        font-size: 1.1rem;
-      }
-
-      @media (max-width: hope-config.$mobile) {
-        font-size: 1rem;
-      }
-
-      @media print {
-        text-decoration: none;
-      }
-
-      &:hover {
-        border-color: var(--text-color-bright);
-        color: var(--text-color-bright);
-      }
-
-      &.primary {
-        border-color: var(--theme-color);
-        background: var(--theme-color);
-        color: var(--white);
-
-        // stylelint-disable max-nesting-depth
-        &:hover {
-          border-color: var(--theme-color-light);
-          background: var(--theme-color-light);
-        }
-        // stylelint-enable max-nesting-depth
-      }
-    }
-  }
-
-  .features {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: stretch;
-    align-items: stretch;
-    justify-content: center;
-
-    margin: 0 -1rem;
-    padding: 1.2rem 0;
-    border-top: 1px solid var(--border-color);
-
-    transition: border-color var(--color-transition);
-
-    @media (max-width: hope-config.$mobile) {
-      margin: 0 -0.5rem;
-    }
-
-    @media print {
-      display: block;
-    }
-  }
-
-  .feature {
-    position: relative;
-
-    flex-basis: calc(33% - 4rem);
-
-    margin: 0.5rem;
-    padding: 1rem;
-    border-radius: 0.5rem;
-
-    transition: background var(--color-transition),
-      box-shadow var(--color-transition), transform var(--transform-transition);
-
-    @media (min-width: hope-config.$pc) {
-      flex-basis: calc(25% - 3rem);
-    }
-
-    @media (max-width: hope-config.$pad) {
-      flex-basis: calc(50% - 3rem);
-    }
-
-    @media (max-width: hope-config.$tablet) {
-      font-size: 0.95rem;
-    }
-
-    @media (max-width: hope-config.$mobile) {
-      flex-basis: calc(100%);
-      margin: 0.5rem 0;
-      font-size: 0.9rem;
-    }
-
-    &.link {
-      cursor: pointer;
-
-      @media print {
-        text-decoration: none;
-      }
-    }
-
-    &:hover {
-      background-color: var(--bg-color-secondary);
-      box-shadow: 0 2px 12px 0 var(--card-shadow);
-      transform: scale(1.05);
-    }
-
-    .icon {
-      display: inline-block;
-      margin-inline-end: 0.5rem;
-      color: var(--theme-color);
-      font-size: 1.1em;
-    }
-
-    h2 {
-      margin: 0.25rem 0 0.5rem;
-      color: var(--text-color-light);
-      font-weight: bold;
-      font-size: 1.3rem;
-
-      @media (max-width: hope-config.$mobile) {
-        font-size: 1.2rem;
-      }
-    }
-
-    p {
-      margin: 0;
-      color: var(--text-color-lighter);
-      line-height: 1.4;
-    }
-  }
-
-  &:not(.pure) {
-    .action-button:active {
-      transform: scale(0.96);
-    }
-
-    .feature:hover .icon {
-      animation-name: bounce;
-      animation-duration: var(--fa-animation-duration, 1s);
-      animation-timing-function: var(
-        --fa-animation-timing,
-        cubic-bezier(0.28, 0.84, 0.42, 1)
-      );
-      animation-delay: var(--fa-animation-delay, 0s);
-      animation-direction: var(--fa-animation-direction, normal);
-    }
-  }
-
   #{hope-config.$content-class} {
     padding-bottom: 1.5rem;
   }