refactor: ♻️ migrate character card to css grid

src/components/card.webc

@@ -1,31 +1,36 @@
 <a class="character-card" :href="href" :class="char">
-  <slot name="image"></slot>
+  <div class="image">
-  <section class="text">
+    <slot name="image"></slot>
+  </div>
+  <div class="text">
     <slot name="title"></slot>
     <slot></slot>
-  </section>
+  </div>
 </a>
 
 <style>
   .character-card {
-    background-color: var(--clr-box-background);
+    display: grid;
-    border: var(--border-thin) solid var(--clr-box-border);
+    align-content: start;
-    font-size: 0.875em;
-    border-radius: 1em;
-    overflow: hidden;
 
+    font-size: 0.875em;
     color: inherit;
     text-decoration: none;
 
+    background-color: var(--clr-box-background);
+
+    border: var(--border-thin) solid var(--clr-box-border);
+    border-radius: 1em;
+
+    overflow: hidden;
+
     &:hover {
       img {
-        transform: scale(1.1);
+        scale: 1.1;
       }
     }
 
-    & picture {
+    & .image {
-      display: flex;
-      align-items: center;
       overflow: hidden;
       aspect-ratio: 3/2;
     }
@@ -34,8 +39,8 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      transform: scale(1);
+      scale: 1;
-      transition: transform 0.2s ease-in-out;
+      transition: scale 0.2s ease-in-out;
     }
 
     & .text {
@@ -45,11 +50,10 @@
     }
 
     & h2 {
-      --heading-spacing: 0.5em;
       position: relative;
       font-size: 1.375rem;
-      margin-block: 0 var(--heading-spacing);
+      margin-block: 0 0.5em;
-      padding-block: 0 var(--heading-spacing);
+      padding-block: 0 0.5em;
 
       &::after {
         content: '';