@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.o-related-articles {
  margin-top: rem(26);
  margin-bottom: rem(26);
  padding: rem(10) rem(10) 0 rem(10);
  border: 1px solid $color-stone-200;
  background-color: $color-white;
  .o-card {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-color: $color-stone-150;
    &:first-child {
      border-color: $color-stone-200;
    }
  }
  .o-card--story .o-card__content-text {
    @include font-pratt;
  }
  .o-card__content-number {
    @include font-gm-sans-bold;
    color: $color-red-900;
    font-size: rem(12);
    line-height: 1;
    letter-spacing: rem(1);
    margin-left: rem(4);
    display: inline-block;
    vertical-align: middle;
  }
  .c-label--card {
    .c-label--card__content {
      margin-bottom: rem(6);
    }
  }
}
.o-related-articles--dark {
  background-color: $color-stone-100;
  .o-card {
    background-color: transparent;
  }
}
.o-related-articles__heading {
  @include font-gm-sans-bold;
  margin-top: 0;
  margin-bottom: rem(10);
  text-transform: uppercase;
  font-size: rem(12);
  letter-spacing: rem(1);
}
