feat: ✨ add card component

src/components/card.webc

@@ -0,0 +1,79 @@
+<a class="character-card" :href="href" :class="char">
+  <slot name="image"></slot>
+  <section class="text">
+    <slot name="title"></slot>
+    <slot></slot>
+  </section>
+</a>
+
+<style>
+  .character-card {
+    background-color: var(--clr-box-background);
+    border: var(--border-thin) solid var(--clr-box-border);
+    font-size: 0.875em;
+    border-radius: 1em;
+    overflow: hidden;
+
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      img {
+        transform: scale(1.1);
+      }
+    }
+
+    & picture {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      aspect-ratio: 3/2;
+    }
+
+    & img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: scale(1);
+      transition: transform 0.2s ease-in-out;
+    }
+
+    & .text {
+      --card-spacing: 1.5rem;
+      padding-block: var(--card-spacing);
+      padding-inline: var(--card-spacing);
+    }
+
+    & h2 {
+      --heading-spacing: 0.5em;
+      position: relative;
+      font-size: 1.375rem;
+      margin-block: 0 var(--heading-spacing);
+      padding-block: 0 var(--heading-spacing);
+
+      &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        left: 0;
+        bottom: 0;
+        height: 0.125em;
+        width: 2em;
+        border-radius: 1em;
+        background: linear-gradient(
+          to right,
+          oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
+          oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
+        );
+      }
+    }
+
+    & p {
+      margin-block: 0;
+
+      & + p {
+        margin-block: 1em 0;
+      }
+    }
+  }
+</style>