article-card.pcss

.article-card {
  @apply elevation-3 transition duration-200;

  &:hover {
    @apply elevation-21;
  }
}

.article-card-cover {
  @apply relative;

  height: 12rem;

  img {
    @apply block object-cover w-full h-full;
  }

  &:before {
    @apply absolute block top-0 left-0 bottom-0 right-0 pointer-events-none;
    content: "";
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.8));
  }
}

.article-card-cover__details {
  /* padding shall be kept in sync with general card */
  @apply absolute left-0 bottom-0 p-2;
}

.article-card-sharing {
  @apply mb-2 transition duration-200 opacity-0;
}

.article-card:hover .article-card-sharing {
  @apply opacity-100;
}

.article-card-meta {
  @apply text-sm text-white text-opacity-85;
}

.article-card-meta__item:not(:first-child) {
  @apply ml-1;

  &:before {
    content: "";
    @apply pr-1 border-l border-white border-opacity-85;
  }
}

.article-card__headline {
  @apply head-heavy-xs mb-2 break-words;
}

.article-card__excerpt {
  @apply font-light leading-normal text-sm break-words;
}