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

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

    .social__list {
      margin-top: $spacing--m;
    }
    .social__link .icon--hover {
      color: $person-profile-social-link-icon-color;

      &:hover {
        color: $person-profile-social-link-icon-color-hover;
      }
    }
  }

  &__initials {
    margin-bottom: $person-initials-spacing-bottom;
    width: 150px;

    &--container {
      position: relative;

      &::after {
        background: $person-initials-background-color;
        border: $person-initials-border;
        border-radius: 50%;
        content: '';
        display: block;
        padding-bottom: 100%;
      }
    }

    span {
      @include font-style(
        $person-initials-title-font-style,
        $person-initials-title-font-style--l
      );
      color: $person-initials-color;
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &__name {
    @include font-style($person-name-font-style, $person-name-font-style);
    color: $person-name-color;
    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;
