FEATURE Adapting card to handle post thumbnail

resources/css/components/post-card.css

@@ -5,6 +5,25 @@
     transform: translateY(-4px);
   }
 
+  &--has-thumbnail {
+    @apply grid  gap-6;
+    grid-template-columns: 1fr 3fr;
+  }
+
+  &__thumbnail {
+    @apply bg-white border border-solid border-primary p-2 h-fit grayscale hover:grayscale-0;
+    transition: all 0.3s ease-out;
+    img {
+      aspect-ratio: 108/137;
+      @apply w-full  bg-green-400 object-cover;
+      height: auto;
+    }
+  }
+
+  &:hover .post-card__thumbnail {
+    @apply !grayscale-0;
+  }
+
   h3.card__title {
     @apply mb-6;
   }