#article .related-articles {
  margin: $border-size-xlarge auto;
  max-width: $large-tablet;
  padding: 5rem 0 5rem;

  .related-articles-heading {
    font-weight: 700;
    font-size: 5rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid $color-black;
  }

  .related-articles-category  {
    margin-bottom: 3rem;
  }

  .related-articles-category-heading {
    font-weight: 500;
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }

  .related-article {
    .related-article-image {
      width: 100%;
      height: 60%;
      object-fit: cover;
    }
    header {
      h2 {
        color: $color-black;
        font-size: 2.25rem;
        font-weight: 700;
        margin: 1rem 0 ;
        a {
          color: $color-black;
        }
      }
      h3 {
        color: $color-black;
        a {
          color: $color-black;
        }
      }
    }
  }

  @media screen and (max-width: $large-phone) {
    .third-related-article {
      display: none;
    }
  }
}

@media screen and (min-width: $small-tablet) {
  #article .related-articles {
    padding: $border-size-xlarge;
  }
}

@media screen and (max-width: $large-phone){
  #article .related-articles {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}
