.c-related-articles {
  text-align: center;

  &:before {
    content: '';
    display: table;
    clear: both;
  }

  &__component-title {
    margin: $spacing 0;
    @include mq(tablet) {
      margin: $spacing--large 0 $spacing;
    }
    padding-bottom: 5px;
    text-align: left;
  }

  &__articles {
    text-align: left;
    @include mq(tablet) {
      display: flex;
      flex-wrap: wrap;
    }
  }

  &__item {
    border-left: 6px solid rgba($brand-grey--light, 0.4);
    padding-left: $spacing;
    padding-right: $spacing;
    padding-bottom: $spacing--small;
    margin: 0 0 $spacing 0;
    @include mq(tablet) {
      margin-bottom: $spacing--large;
    }
    flex-basis: 50%;
    flex-grow: 0;
    @include mq(tablet) {
      max-width: 50%; // IE fix: box-sizing: border-box is ignored by IE when sizing with flex-basis.
    }

    &--subject-material {
      border-left: 6px solid $subject-material-light;
    }

    &--tasks-and-activities {
      border-left: 6px solid $tasks-and-activities-background;
    }

    &--assessment-resources {
      border-left: 6px solid $assessment-resource-background;
    }

    &--external-learning-resources {
      border-left: 6px solid $external-learning-resource-background;
    }

    &--source-material {
      border-left: 6px solid $source-material-light;
    }

    &--learning-path {
      border-left: 6px solid $learning-path-background;
    }

    &--subject {
      border-left: 6px solid $subject-light;
    }

    &--hidden {
      display: none;
    }

    &--shown {
      display: block;
    }
  }

  &__title {
    @include font-size(18px);
    margin: 0 0 $spacing--small 0;
    font-weight: $font-weight-semibold;
    display: flex;

    @include chinese() {
      @include font-size(20px);
    }

    .c-content-type-badge {
      flex-shrink: 0;
      margin-top: 1px;
    }
  }

  &__description {
    @include font-size(16px);

    @include chinese() {
      @include font-size(18px);
    }

    span {
      @include chinese() {
        @include font-size(18px);
      }
    }

    margin: 0;
    font-family: $font;
  }

  &__link {
    color: $brand-color;
  }

  &__link-wrapper {
    margin-left: $spacing--small;
  }

  &__link-info {
    font-weight: $font-weight-semibold;
    @include font-size(16px, 20px);
    margin: $spacing--small 0 0 0 !important;
  }
}