.author {
  padding-top: $spacing--m;

  .block__title {
    @include font-style('title--s', 'title--s');
    margin-bottom: $spacing--m;
  }

  .person {
    &__image {
      height: $baseline * 10;
      width: 100px;
    }

    &__name {
      @include font-style('title--s', 'title--xs');
    }
  }
  // viewport l
  @include viewport--l {
    padding-top: $spacing--l;

    .person {
      &__profile {
        display: flex;
      }

      &__image {
        height: $baseline * 5;
        flex-shrink: 0;
        width: 50px;

        & + .person__info {
          margin-left: auto;
          width: grid-columns(6,7);
        }
      }

      &__info {
        flex: 0 1 auto; // set default needed for IE 10        
      }

      &__title {
        margin-top: 0;
      }

      &__info p:not(.person__title),
      &__description {
        margin-top: $spacing--xs;
      }
    }
  }
  // viewport xl
  @include viewport--xl {
    .person__image {
      height: $baseline * 8;
      width: 80px;
    }
  }
}
