.article-card {
  @apply bg-white border border-primary p-6 relative  !flex flex-col;

  &: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-2xl font-medium uppercase pb-4;
  }
  &__tags {
    @apply flex flex-wrap gap-4 pt-4;
  }
  &__cover {
    @apply w-48 h-48  absolute  border-primary border bottom-12 right-12 hidden lg:block;
    transform: rotate(-3deg);

    img {
      @apply w-full h-full object-cover;
    }
  }
  .cta--go {
    @apply text-primary mt-auto;
  }
}