.contact-person {
  @include viewport--l {
    width: grid-columns(8, 12);
    // person profile
    .person__profile {
      display: flex;
    }
    // person image
    .person__image {
      height: 100%;
      max-height: grid-columns(3, 8);
      margin-bottom: 0;
      max-width: grid-columns(3, 8);
      width: 200px;
    }

    // initials
    .person__initials {
      max-width: grid-columns(3, 8);
      width: 200px;

      span {
        @include font-style('title--xl');
      }
    }
    // person info
    .person__info {
      margin-left: auto;
      width: grid-columns(5, 8);
    }
  }
}

.meta-info {

  @include viewport--l {
    border-radius: $border-radius--l;
    max-width: grid-columns(6, 12);
    margin-left: auto;
    padding: $spacing--l;
  }
}

@include person-profile-background-mapping;