.person {
  &__profile {
    & + & {
      margin-top: $spacing--l;
    }

    .contact-details {
      margin-top: $spacing--s;
    }

    .social__list {
      margin-top: $spacing--m;
    }
  }

  &__name {
    @include font-style($person-name-font-style, $person-name-font-style);
    text-transform: $person-name-text-transform;
  }

  &__description + .social__list {
    margin-top: $spacing--s;
  }

  &__info p:not(.person__title),
  &__description {
    margin-bottom: 0;
    margin-top: $spacing--s;
  }

  &__title {
    @include font-style('body--l');
    margin-bottom: 0;
    margin-top: $spacing--xs;
  }

  &--s {
    display: flex;

    .person__description {
      @include font-style('body--m');
      margin-left: $spacing--s;
      margin-top: 0;
    }
  }
}

// viewport l
@include viewport--l {
  .person__profile + .person__profile {
    margin-top: $spacing--xl;
  }

  .my-environment-container .person__initials {
      margin-bottom: 0;
  }
}

// background mappings
@include person-profile-background-mapping;