.article-card {
  @apply p-6 relative  !flex flex-col pt-16;

  svg {
    @apply absolute top-0 left-0 w-full h-full;
    z-index: -1;
    path {
      stroke-width: 0;
      vector-effect: non-scaling-stroke;
    }
  }

  &:hover {
    svg {
      path {
        stroke-width: 8px;
      }
    }
    &: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;
  }
}