card hover styles

src/App.vue

@@ -22,10 +22,11 @@
 
 <style lang="sass">
   @import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap')
+  @import url('https://fonts.googleapis.com/css2?family=Material+Icons&display=swap')
   :root
     --dark-bg: #1a1a1a
     --dark-bg2: #212121
-    --dark-bg3: #414141
+    --dark-bg3: #313131
     --light: #c0c0c0
   *
     margin: 0

src/components/card.vue

@@ -33,6 +33,7 @@ export default defineComponent({
     user-select: none
     color: inherit
     text-decoration: inherit
+    transition-duration: 100ms
     img
       width: 84px
       border-radius: 8px 0 0 8px
@@ -42,4 +43,9 @@ export default defineComponent({
       .name
         font-size: 1.7em
         letter-spacing: 0.1em
+      .meta
+        opacity: 0.5 
+    &:focus,&:hover
+      background-color: var(--dark-bg3)
+      transform: scale(1.05)
 </style>