refactor: ♻️ use more of the webc feature set proper

src/components/card.webc

@@ -1,4 +1,4 @@
-<a class="character-card" :href="href" :class="char">
+<a :href="href" :class="char" webc:root="override">
   <div class="image">
     <slot name="image"></slot>
   </div>
@@ -8,8 +8,8 @@
   </div>
 </a>
 
-<style>
-  .character-card {
+<style webc:scoped="character-card">
+  :host {
     display: grid;
     align-content: start;
 
@@ -23,61 +23,59 @@
     border-radius: 1em;
 
     overflow: hidden;
+  }
 
-    &:hover {
-      img {
-        scale: 1.1;
-      }
-    }
+  :host:hover img {
+    scale: 1.1;
+  }
 
-    & .image {
-      overflow: hidden;
-      aspect-ratio: 3/2;
-    }
+  :host .image {
+    overflow: hidden;
+    aspect-ratio: 3/2;
+  }
 
-    & img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      scale: 1;
-      transition: scale 0.2s ease-in-out;
-    }
+  :host img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    scale: 1;
+    transition: scale 0.2s ease-in-out;
+  }
 
-    & .text {
-      --card-spacing: 1.5rem;
-      padding-block: var(--card-spacing);
-      padding-inline: var(--card-spacing);
-    }
+  :host .text {
+    --card-spacing: 1.5rem;
+    padding-block: var(--card-spacing);
+    padding-inline: var(--card-spacing);
+  }
 
-    & h2 {
-      position: relative;
-      font-size: 1.375rem;
-      margin-block: 0 0.5em;
-      padding-block: 0 0.5em;
+  :host h2 {
+    position: relative;
+    font-size: 1.375rem;
+    margin-block: 0 0.5em;
+    padding-block: 0 0.5em;
+  }
 
-      &::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)
-        );
-      }
-    }
+  :host h2::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;
+  :host p {
+    margin-block: 0;
+  }
 
-      & + p {
-        margin-block: 1em 0;
-      }
-    }
+  :host p ~ p {
+    margin-block: 1em 0;
   }
 </style>