.content-card {
  box-sizing: border-box;
  height: 100%;
  min-height: 214px;
  background-color: rgb(var(--color-white));
  border: 1px solid rgb(var(--color-grey) / 0.2);
  border-top: 4px solid rgb(var(--color-main-blue-light));
  border-radius: 6px 6px 10px 10px;
  padding: var(--space-3);
}

.content-card--default {
  border-top-color: rgb(var(--color-main-blue-light));
}

.content-card--dark {
  border-top-color: rgb(var(--color-grey));
}

.content-card--red {
  border-top-color: rgb(var(--color-red));
}

.content-card__date {
  margin: 0 0 var(--space-1);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-grey));
}

.content-card__heading {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  color: rgb(var(--color-dark));
}

.content-card__heading--underline {
  border-bottom: 1px solid rgb(var(--color-grey) / 0.2);
}

/* Careers page only (see fhfa_refreshed_preprocess_html()) - the Benefits/
   Contact cards' heading is already a real <h3> in the markup, but this
   class defaults to H4-scale typography since it's shared with the About
   page's Mission/Vision cards and Newsroom's press-release cards, which
   should stay at H4. Scoped here rather than changing the shared rule
   above, so only Careers' cards move to true H3 typography. */
.page--careers .content-card__heading {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-h3);
}

.content-card__subtext {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-black));
  line-height: 150%;
}

.content-card__link {
  margin-top: var(--space-2);
}

.content-card__link a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-main-blue));
  text-decoration: none;
}

.content-card__link a:hover {
  text-decoration: underline;
}

.content-card__link a:focus-visible {
  outline: 2px solid rgb(var(--color-main-blue-light));
  outline-offset: 2px;
}

.content-card__link a::after {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 2px solid rgb(var(--color-main-blue));
  border-bottom: 2px solid rgb(var(--color-main-blue));
  transform: rotate(-45deg);
}