.card {
  display: flex;
  flex-direction: column;
  color: var(--anrt-color-text);
  border: 2px solid var(--anrt-color-white);
  border-radius: var(--anrt-radius);
  background-color: var(--anrt-color-grey-98);
}

.card:hover,
.card:focus,
.card:focus-within {
  cursor: pointer;
  background: var(--anrt-color-white);
  box-shadow: 0 8px 8px rgb(0 0 0 / 0.15);
}

.card:hover a,
.card:focus a,
.card:focus-within a {
  text-decoration: underline;
}

.card a {
  text-decoration: none;
  color: var(--anrt-color-text);

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

.card__image {
  display: block;
  flex-grow: 0;
  vertical-align: bottom;

  & img {
    width: 100%;
    border-radius: var(--anrt-radius);
  }
}

.card__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  padding: var(--anrt-spacing-166);
}

.card__top p:last-child,
.card__bottom p:last-child {
  margin-bottom: 0;
}

.card__date {
  margin: 0 0 var(--anrt-spacing-100);
  font-weight: 300;
}

.card__tagline {
  margin-bottom: var(--anrt-spacing-100);
}

.card__title {
  display: block;
  margin-top: var(--anrt-spacing-100);
  margin-bottom: 0;
  font-weight: 800;
}

.card__subtitle {
  font-weight: 600;
}