diff --git a/.vitepress/theme/styles/_components/card.scss b/.vitepress/theme/styles/_components/card.scss
new file mode 100644
index 0000000..eee67b0
--- /dev/null
+++ b/.vitepress/theme/styles/_components/card.scss
@@ -0,0 +1,333 @@
+@use "../mixin";
+
+// https://m3.material.io/components/cards/
+
+.card {
+  display: flex;
+  flex-direction: column;
+
+  position: relative;
+
+  overflow: hidden;
+  transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-standard);
+
+  .card-impression {
+    img {
+      display: block;
+
+      max-width: unset;
+
+      object-fit: cover;
+      transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+    }
+  }
+
+  .card-supporting {
+    color: var(--md-sys-color-on-surface);
+
+    pointer-events: none;
+
+    h3 {
+      transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
+    }
+  }
+
+  &[spec="feed"] {
+    margin-block-end: 24px;
+    padding-block-end: 12px;
+
+    border-radius: var(--md-sys-shape-corner-extra-large);
+
+    background-color: var(--md-sys-color-surface-container-lowest);
+
+    transform: translateY(0px);
+
+    & > a {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .card-impression {
+      display: flex;
+      gap: 12px;
+      flex-direction: column;
+
+      .impression-image img {
+        height: 240px;
+        width: 100%;
+
+        border-radius: var(--md-sys-shape-corner-large);
+        outline: 1px solid var(--md-sys-color-outline-variant);
+      }
+
+      .impression-title {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        gap: 12px;
+
+        padding-inline: 12px;
+
+        .author-mugshot {
+          position: relative;
+
+          img {
+            height: 48px;
+            width: 48px;
+
+            border-radius: var(--md-sys-shape-corner-full);
+          }
+
+          span {
+            @include mixin.material-symbols($size: 18);
+
+            padding: 3px;
+
+            position: absolute;
+            right: -3px;
+            bottom: -3px;
+
+            background-color: var(--md-sys-color-surface-container);
+
+            border-radius: 100%;
+
+            text-align: center;
+          }
+        }
+
+        .article-title {
+          h4 {
+            font-family: "Josefin Sans", sans-serif;
+            font-optical-sizing: auto;
+            font-style: normal;
+            font-weight: 600;
+            text-transform: uppercase;
+          }
+        }
+      }
+    }
+
+    .card-supporting {
+      padding-inline: 12px;
+
+      h4 {
+        letter-spacing: 0.6rem;
+      }
+    }
+
+    .card-action {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+
+      padding-inline: 12px;
+
+      p {
+        padding: 8px 12px;
+
+        color: var(--md-sys-color-on-surface);
+
+        background-color: var(--md-sys-color-surface-bright);
+
+        border-radius: var(--md-sys-shape-corner-medium);
+      }
+
+      div {
+        display: flex;
+        flex-direction: row;
+        gap: 12px;
+      }
+
+      a {
+        text-decoration: none;
+      }
+    }
+
+    &[size="large"] {
+      gap: 12px;
+
+      .card-supporting h3 {
+        min-height: 150px;
+      }
+    }
+
+    &[size="medium"] {
+      gap: 12px;
+
+      padding-block: 12px;
+
+      .card-impression {
+        flex-direction: row-reverse;
+        justify-content: space-between;
+
+        .impression-image img {
+          width: 140px;
+          height: 140px;
+        }
+
+        .impression-title {
+          flex-direction: column;
+          align-items: flex-start;
+
+          h5 {
+            min-height: 120px;
+          }
+        }
+      }
+    }
+
+    &[size="small"] {
+      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+
+      padding-block: 6px;
+      padding-inline: 18px 6px;
+
+      .card-action button {
+        justify-content: end;
+      }
+
+      $colors: ("red", "blue", "green", "yellow", "purple");
+
+      @each $color in $colors {
+        &[color="#{$color}"] {
+          color: var(--md-sys-color-on-#{$color}-container);
+
+          background-color: var(--md-sys-color-#{$color}-container);
+        }
+      }
+    }
+
+    &:hover {
+      &[size="large"],
+      &[size="medium"] {
+        background-color: var(--md-sys-color-surface-container);
+      }
+
+      &[size="small"] {
+        border-radius: var(--md-sys-shape-corner-large);
+      }
+    }
+  }
+
+  &[spec="clear"] {
+    border-radius: var(--md-sys-shape-corner-extra-large);
+
+    background-color: var(--md-sys-color-surface-bright);
+
+    cursor: pointer;
+
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--md-sys-color-surface-dim);
+    }
+
+    .card-impression {
+      position: relative;
+
+      border-radius: var(--md-sys-shape-corner-extra-large-bottom);
+
+      background-color: var(--md-sys-color-inverse-primary);
+
+      overflow: hidden;
+
+      img {
+        height: 240px;
+        width: 100%;
+      }
+    }
+
+    .card-supporting {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+
+      padding-block: 20px 18px;
+      padding-inline: 20px;
+
+      #card-supporting--weaken {
+        text-align: end;
+
+        opacity: 0.5;
+      }
+    }
+
+    &:hover {
+      color: var(--md-sys-color-on-secondary-container);
+
+      background-color: var(--md-sys-color-secondary-container);
+
+      .card-supporting h3 {
+        font-weight: 700;
+      }
+    }
+
+    &:active {
+      border-radius: calc(2 * var(--md-sys-shape-corner-extra-large));
+
+      transition: var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
+
+      .card-supporting h3 {
+        font-weight: 200;
+      }
+    }
+  }
+
+  &[spec="focus"] {
+    height: 240px;
+
+    border-radius: var(--md-sys-shape-corner-extra-large);
+    outline: 1px solid var(--md-sys-color-outline-variant);
+
+    background-color: var(--md-sys-color-primary);
+
+    cursor: pointer;
+
+    .card-impression {
+      height: 100%;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .card-supporting {
+      position: absolute;
+      bottom: 0px;
+
+      margin: 20px;
+
+      color: var(--md-sys-color-on-primary);
+
+      transform: translateY(calc(100% + 20px));
+      transition: var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);
+
+      h3 {
+        font-weight: 100;
+      }
+    }
+
+    &:hover {
+      img {
+        opacity: 0.5;
+
+        transition: opacity var(--md-sys-motion-duration-medium2);
+      }
+
+      .card-supporting {
+        transform: translateY(0%);
+
+        h3 {
+          font-weight: 700;
+        }
+      }
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+}