.related-post-item {
  & {
    display: flex;
    text-align: left;
    line-height: 1.4;
  }

  // Layout
  & > a {
    flex: 1 1 100%;
    display: block;
    border-radius: 2px;
    box-shadow: $shadow2;
    padding: 16px;
    text-decoration: none;
  }

  // Color
  & > a,
  & > a:visited {
    background: white;
    color: $base-mute;

    & > strong {
      color: $base-a;
    }

    &:hover,
    &:focus {
      color: $base-a;
    }

    &:hover > strong,
    &:focus > strong {
      color: darken($base-a, 16%);
    }
  }

  &:first-of-type > a,
  &:first-of-type > a:visited {
    background: $base-a;
    color: rgba(white, 0.5);

    & > strong {
      color: white;
    }

    &:hover,
    &:focus {
      color: white;
    }

    &:hover > strong,
    &:focus > strong {
      color: white;
    }

    &:hover,
    &:focus {
      background: darken($base-a, 8%);
    }
  }

  // Two lines when bigger
  @media (min-width: 481px) {
    & > a > strong,
    & > a > span {
      display: block;
    }
  }

  & > a > strong {
    @include font-size(1);
    font-weight: normal;
  }

  & > a > span {
    @include font-size(-1);
  }
}