STYLE refining component

resources/css/components/article-card.css

@@ -1,6 +1,37 @@
 .article-card {
-  @apply bg-white border border-primary  p-4;
+  @apply bg-white border border-primary p-6 relative;
 
+  &:after {
+    @apply content-[''] absolute inset-0 border-primary w-full h-full pointer-events-none;
+    border-width: 4px;
+    opacity: 0;
+  }
+  &:hover {
+    &:after {
+      opacity: 1;
+    }
+    .article-card__link-button {
+      svg {
+        @apply translate-x-2;
+      }
+    }
+  }
+  &__link-button {
+    @apply block mt-8;
+    width: 100px;
+    height: 100px;
+    svg {
+      transition: transform 0.3s ease-in-out;
+
+      path,
+      circle {
+        @apply stroke-primary;
+      }
+    }
+  }
+  .content-meta {
+    @apply text-primary;
+  }
   &__title {
     @apply text-3xl font-medium uppercase pb-4;
   }