@use '../variables/fonts';
@use '../variables/colors';
@use '../variables/line-height';

@use '../tools/rfs';

.related-items {
  margin: 0 auto;
  max-width: 630px;
 h2.related-items--headline {
    font-family: fonts.$font-family-sans-serif;
    @include rfs.font-size(16px);
    line-height: line-height.$title;
    margin-top: 0;
    @include rfs.margin-bottom(14px);
  }
  ul.related-items--list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li.related-items--item {
    font-family: fonts.$font-family-headline;
    font-weight: fonts.$font-weight-bold;
    border-bottom: 1px solid colors.$light-gray;
    display: grid;
    grid-gap: 1.25rem;
    grid-template-columns: minmax(7.8125rem, 1fr) 3fr;
    @include rfs.margin-bottom(14px);
    @include rfs.padding-bottom(14px);
    > a {
      @include rfs.font-size(20px);
      color: colors.$black;
      line-height: line-height.$title;
      text-decoration: none;
      &:hover,
      &:active,
      &:focus {
        color: colors.$gray;
      }
      img {
        max-width: 100%;
      }
    }
  }
}