.person {
  display: flex;

  $b: &;

  &__content {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  &__avatar {
    position: relative;
    border-radius: 100%;
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    flex-shrink: 0;

    img {
      @include fill-img;

      border-radius: 100%;
    }
  }

  &__name {
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.5px;

    @include screen(lg, max) {
      font-size: 1.6rem;
      font-weight: 700;
      text-transform: lowercase;
    }
  }

  &__comment {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;

    span {
      font-weight: 700;
    }
  }

  &__info {
    font-size: 1.4rem;
    font-weight: 300;
    color: #c4c8e0;
    line-height: 1.4;

    span {
      position: relative;

      &:not(:last-child) {
        padding-right: 0.5rem;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(100%, -50%);
          width: 0.2rem;
          height: 0.2rem;
          background-color: #c4c8e0;
          border-radius: 100%;
        }
      }

      &:not(:first-child) {
        padding-left: 0.5rem;
      }
    }

    &_purple {
      color: #7370f9;

      /* stylelint-disable-next-line no-descending-specificity */
      span {
        /* stylelint-disable-next-line no-descending-specificity */
        &::after {
          background-color: #7370f9 !important;
        }
      }
    }
  }

  &__text {
    font-weight: 400;
    font-size: 1.4rem;
    color: #fcfcf4;
    line-height: 1;
    margin: 2rem 0 1rem;

    @include screen(lg, max) {
      font-size: 1.4rem;
      font-weight: 300;
      line-height: 1.5;
    }
  }

  &.mobile-size {
    background-color: #191726;
    font-family: 'Roboto Condensed', 'Open sans' sans-serif;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    font-size: 2rem;
    flex-direction: column;
    align-items: center;
    padding-bottom: 1rem;

    #{$b}__avatar {
      width: 5.4rem;
      height: 5.4rem;
      margin-right: 0;
      margin-bottom: 0.8rem;
      flex-shrink: 0;
    }

    #{$b}__date {
      color: #7370f9;
      font-size: 2.4rem;
      margin-top: 1.1rem;
    }
  }
}