@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/objects.author-info";
@import "mixins/tools.functions";
@import "mixins/tools.mixins";

.o-author-info {
  @include display-grid;
  @include grid-template-columns(1fr);
  @include grid-template-rows(grid-repeat(2, auto));
}

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

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


// Badges
.o-author-info__badges {
  margin-bottom: rem(30);
}

.o-author-info__badge-label {
  @include font-gm-sans-bold;
  font-size: rem(12);
  color: $color-grey-700;
  letter-spacing: rem(1);
  line-height: line-height(12, 12);
  text-transform: uppercase;
  padding-bottom: rem(5);
  margin-top: rem(10);
  margin-bottom: rem(5);
  border-bottom: rem(2) solid $color-grey-700;
}
.o-author-info__badge-number {
  @include font-pratt-bold;
  font-size: rem(60);
  color: $color-grey-700;
  letter-spacing: rem(1.1);
  line-height: line-height(60, 60);
  display: block;
}

.o-author-info__badge-1,
.o-author-info__badge-2 {
  height: rem(140);
  width: rem(140);
  background-color: $color-gold-150;
  border-radius: 50%;
  display: inline-block;
  padding: rem(20);
  text-align: center;
}

.o-author-info__badge-1 {
  margin-right: rem(20);
}

.o-author-info__badge-2 {
  background-color: $color-rust-150;
}

.o-author-info__details__content {
  margin: 0 0 rem(45);
}

.o-author-info__details__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-info__details__item {
  @include font-gm-sans;
  font-size: rem(14);
  color: $color-grey-800;
  letter-spacing: 0;
  line-height: line-height(14, 18);
  margin: 0 0 rem(5);
}




// Media queries
@include mq($from: tablet) {
  @include author-info-sm;
}

@include mq($from: tabletMedium) {
  @include author-info-md;
}

@include mq($from: desktop) {
  @include author-info-lg;
}
