/**
 * Article card (vertical) - ports ArticleCard.scss. Tokens: var(--ssr-*).
 */

.ssr-related-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 36px;
}

.ssr-related-card__image {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #999;
  border-radius: var(--ssr-radius-xl);
}

.ssr-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ssr-related-card__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 12px 0 8px;
  font: 700 18px/24px var(--ssr-font-family);
  color: var(--ssr-color-neutral-800);
  text-decoration: none;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.ssr-related-card__meta {
  display: block;
  font: 400 14px/20px var(--ssr-font-family);
  color: var(--ssr-color-neutral-600);
}

.ssr-related-card__sep {
  margin: 0 6px;
  color: var(--ssr-color-neutral-400);
}

/* Category is its own <a> so it's tappable / not nested inside the article link. */
.ssr-related-card__cat {
  color: #303030;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .ssr-related-card {
    margin-bottom: 12px;
  }

  .ssr-related-card__image {
    border-radius: 6px;
  }
}