@import "settings.colors";

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

.o-author-media {
  @include display-grid;
  @include grid-template-columns(0, rem(40) 1fr);
  @include grid-template-rows(0, 1fr);
}

.o-author-media__icon-col {
  @include grid-column(1, 2);
  @include grid-row(1, 2);
}

.o-author-media__content {
  @include grid-column(2, 3);
  @include grid-row(1, 2);
}

.o-author-media__icon {
  fill: $color-grey-500;
  width: rem(20);
  height: rem(25);
}

.o-author-media__content-item {
  display: block;
}
.o-author-media__heading {
  @include font-gm-sans-bold;
  font-size: rem(14);
  color: $color-grey-900;
  letter-spacing: rem(1);
  line-height: line-height(14, 14);
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: rem(10);
  margin-top: 0;
}

.o-author-media__content-item {
  @include font-pratt;
  color: $color-grey-900;
  font-size: rem(16);
  line-height: line-height(16, 22);
  margin-top: 0;
  margin-bottom: rem(5);

  .c-breadcrumb {
    display: inline-block;
    padding-top: 0;
    margin-left: rem(10);
  }
}

.o-author-media__content-item__link {
  color: $color-grey-900;
  text-decoration: none;
  border-bottom: 1px solid $color-grey-900;
  &:hover {
    color: $color-red-500;
    border-bottom: 1px solid $color-red-500;
  }
  &:focus {
    color: $color-red-bright;
    border-bottom: 1px solid $color-red-bright;
  }
}
