.card {
  position: relative;
  img {
    width: 100%;
    margin-bottom: 20px;
  }
  figcaption {
    header {
      display: flex;
      flex-direction: column-reverse;
      text-align: left;
      .card-title {
        font: var(--title2);
      }
      h2:not(.card-title), time {
        font: var(--caption);
        color: #888;
      }
    }
  }
  menu {
    margin-top: 10px;
    padding-left: 0;
    margin-bottom: 0;
  }
  .card-link {
    &, &:visited, &:hover, &:active {
      color: inherit;
      text-decoration: none;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
    }
    &:focus-visible {
      outline: none;
    }
  }
  /* Links inside the card sit above the stretched title link */
  a:not(.card-link) {
    position: relative;
    z-index: 1;
  }
  &:has(.card-link:focus-visible) {
    outline: 2px solid var(--black);
    outline-offset: 3px;
  }
}

@media (width <= 799px) {
  .card {
    img {
      margin-bottom: 10px;
    }
    figcaption {
      header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}