use img in playlist card

+ use $black background on right sidebar

src/components/PlaylistsList/PlaylistCard.vue

@@ -4,12 +4,7 @@
     :playlist="props.playlist"
     class="p-card rounded bg-primary"
   >
-    <div
-      class="image p-image rounded shadow-sm"
-      :style="{
-        backgroundImage: `url(${imguri + props.playlist.thumb})`,
-      }"
-    ></div>
+    <img :src="imguri + props.playlist.thumb" class="rounded" />
     <div class="bottom">
       <div class="name ellip">{{ props.playlist.name }}</div>
       <div class="count">
@@ -41,47 +36,20 @@ const props = defineProps<{
   transition: all 0.25s ease;
   position: relative;
 
-  .p-image {
-    min-width: 100%;
-    transition: all 0.2s ease;
-    background-color: $gray4;
+  img {
+    width: 100%;
     aspect-ratio: 1;
-  }
-
-  .drop {
-    position: absolute;
-    bottom: 4rem;
-    right: 1.25rem;
-    opacity: 0;
-    transition: all 0.25s ease-in-out;
-    display: none;
-
-    .drop-btn {
-      background-color: $gray3;
-    }
-  }
-
-  .pbtn {
-    display: none;
-    position: absolute;
-    bottom: 4.5rem;
-    left: 1.25rem;
-    transition: all 0.25s ease-in-out;
-    z-index: 10;
+    object-fit: cover;
   }
 
   &:hover {
-    background-color: $gray2;
-
-    .drop {
-      transition-delay: 0.75s;
-      opacity: 1;
-      transform: translate(0, -0.5rem);
-    }
+    background-color: $darkestblue;
   }
 
   .bottom {
-    margin-top: 1rem;
+    margin-top: $smaller;
+    display: grid;
+    justify-items: center;
 
     .name {
       font-weight: 900;
@@ -89,7 +57,7 @@ const props = defineProps<{
 
     .count {
       font-size: $medium;
-      color: $gray1;
+      opacity: .5;
     }
   }
 }