dupont release

app/components/Card.vue

@@ -13,10 +13,10 @@
         <Rank :card="props.card" />
 
         <!-- Cover -->
-        <figure class="flex-1 flex justify-center items-center overflow-hidden cursor-pointer">
+        <figure class="cover">
           <PlayButton />
-          <img :src="props.card.url_image" alt="Pochette de l'album" :loading="props.imageLoadingType"
-            @load="$emit('image-loaded', $event)" class="pochette w-full h-full object-cover object-center" />
+          <img :src="props.card.url_image" alt="cover-image de l'album" :loading="props.imageLoadingType"
+            @load="$emit('image-loaded', $event)" class="cover-image w-full h-full object-cover object-center" />
         </figure>
 
         <!-- Body -->
@@ -92,11 +92,7 @@ const isTrackLoaded = ref(false)
 /* Flip effect */
 .card {
   perspective: 1000px;
-  @apply transition-all scale-100 w-56 h-80 min-w-56 min-h-80;
-
-  .pochette {
-    border-radius: 0.75rem;
-  }
+  @apply transition-all scale-100 size-full;
 
   .flip-inner {
     position: relative;
@@ -121,6 +117,14 @@ const isTrackLoaded = ref(false)
     border-radius: 1rem;
     transform: rotateY(0deg);
     transition: box-shadow 0.6s;
+
+    .cover {
+      @apply flex-1 flex justify-center items-center overflow-hidden cursor-pointer;
+
+      .cover-image {
+        border-radius: 0.75rem;
+      }
+    }
   }
 
   .face-down {
@@ -200,7 +204,7 @@ const isTrackLoaded = ref(false)
     }
   }
 
-  .pochette:active,
+  .cover-image:active,
   .face-down:active {
     .play-button {
       @apply scale-90;