.article-keep-reading {
  color: rgb(34, 34, 34);
  background: rgba(var(--color-background));
}

.article-keep-reading__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.article-keep-reading__eyebrow {
  margin: 0 0 24px;
  color: #214e34;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.article-keep-reading__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
}

.article-card__media-frame {
  overflow: hidden;
  border-radius: 4px;
}

.article-card .article-cover--card {
  width: 100%;
  height: 180px;
  border-radius: 4px;
  background-color: #f7f4ec;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .article-cover--card,
.article-card:focus-visible .article-cover--card {
  transform: scale(1.04);
}

.article-card__eyebrow {
  color: #214e34;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-card__title {
  align-self: flex-start;
  padding-bottom: 2px;
  color: #173824;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 18px;
  line-height: 1.3;
  background-image: linear-gradient(#214e34, #214e34);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.3s ease, color 0.2s ease;
}

.article-card:hover .article-card__title,
.article-card:focus-visible .article-card__title {
  color: #214e34;
  background-size: 100% 1.5px;
}

@media (prefers-reduced-motion: reduce) {
  .article-card .article-cover--card,
  .article-card__title {
    transition: none;
  }
  .article-card:hover .article-cover--card,
  .article-card:focus-visible .article-cover--card {
    transform: none;
  }
}

/* Sep 3: four articles are fetched because one of them may be the article being
   read, and the template has no arithmetic to count how many it actually
   rendered. Three is the row, so a fourth card — which only appears when the
   current article is older than all four — is dropped here. */
.article-keep-reading__grid > :nth-child(n + 4) {
  display: none;
}