/*------------------------------------*\
  Components > Author
\*------------------------------------*/

.c-author {
  padding: double($base-spacing-unit);
  margin-bottom: double($base-spacing-unit);
  background-color: $bg-gray;
  border: 1px solid $color-border;

  @include mq($until: tablet) {
    text-align: center;
  }

  @include mq($from: tablet) {
    display: flex;
    align-items: center;
  }

  &__media {
    @include mq($until: tablet) {
      margin-bottom: $base-spacing-unit;
    }

    @include mq($from: tablet) {
      margin-right: $base-spacing-unit + quarter($base-spacing-unit);
    }
  }

  .avatar {
    display: block;
    width: quadruple($base-spacing-unit) + double($base-spacing-unit);
    height: quadruple($base-spacing-unit) + double($base-spacing-unit);
    border-radius: 100%;
    border: quarter($base-spacing-unit) solid $color-white;

    @include mq($until: tablet) {
      margin: 0 auto;
    }
  }

  &__content {
    @include mq($from: tablet) {
      flex: 3;
    }
  }

  &__title {
    margin-bottom: 0;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
  }

  &__bio {
    font-size: $font-size-small;
    margin-top: half($base-spacing-unit);

    @include mq($from: tablet) {
      margin-bottom: 0;
    }
  }
}