/**
 * HG news teaser "card" layout: thumbnail left, headline/dateline/excerpt
 * right. Used by the homepage "Recent News" block and the /news listing.
 * Overrides hg_reader's news.css teaser rules, which float/stack images
 * without the flex card layout used here.
 */

.hg-news-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.hg-news-card.no-image {
  display: block;
}

.hg-news-card .hg-card-image {
  flex: 0 0 180px;
  width: 180px;
}

.hg-news-card .hg-card-image a {
  display: block;
}

.hg-news-card .hg-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0.35rem;
}

.hg-news-card .hg-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.hg-news-card .hg-title {
  width: 100%;
  margin: 0 0 0.5rem;
}

.hg-news-card .hg-title p {
  margin: 0;
}

.hg-news-card .dateline {
  width: 100%;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #6c6c6c;
}

.hg-news-card .description {
  width: 100%;
}

@media (max-width: 575.98px) {
  .hg-news-card {
    display: block;
  }

  .hg-news-card .hg-card-image {
    width: 100%;
    max-height: 200px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    border-radius: 0.35rem;
  }

  .hg-news-card .hg-card-image img {
    aspect-ratio: auto;
    max-height: 200px;
  }

  .hg-news-card .hg-card-body {
    width: 100%;
  }
}