.person {

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

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

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

      &:hover {
        color: $social-icon-hover-color;
      }
    }
  }

  &__image {
    background: $color-brand--four;
    height: $baseline * 15;
    margin-bottom: $spacing--s;
    position: relative;
    width: 150px;

    img {
      position: relative;
    }
  }

  &__initials {
    margin-bottom: $person-initials-margin-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--m, $person-initials-title--l);
      color: $person-initials-color;
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

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

.bg-brand--off-white .person__initials--container::after,
.bg-brand--light-grey .person__initials--container::after {
  background: $color-brand--white;
}

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