.bio {
  @include flexbox();
  @include justify-content(center);
  @include align-items(flex-start);
  @include flex-direction(column);
  @include themify($codeblock) {
    color: themed('content-pre-color');
  }

  width: 100%;
  max-width: 928px;
  font-family: $title-font;

  &__photo {
    border-radius: 0.25rem;
    width: 100%;
    max-width: 250px;
    height: auto;
    @include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));

    &[data-ani="true"] {
      @include animation('slide-in-down-little .2s .6s 1 ease-in both');
    }

    &-wrapper {
      width: 90%;
      height: 100%;
      border-radius: 0.25rem;  
      margin: 1rem auto;
      @include flexbox();
      @include align-items(center);
      @include justify-content(center);
    }
  }

  &__name {
    font-weight: 700;
    letter-spacing: 1px;
    font-family: inherit;
    font-size: 26px;
    margin-top: 0.8rem;
  }

  &__desc {
    margin: 0.5rem 0;
    font-size: 14px;
  }

  &__info {
    font-size: 14px;
    margin: 0.1rem 0;
    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
  }

  &[data-dir="ltr"] {
    .bio__info {
      &--icon {
        margin-right: 0.25rem;

        @include flexbox();
        @include align-items(center);
        @include themify($themes) {
          color: themed('social-icon-color');
        }
      }

      a {
        padding-right: 1rem;
        @include truncate($sidebar-width);
      }
    }
  }

  &[data-dir="rtl"] {
    .bio__info {
      &--icon {
        margin-left: 0.25rem !important;
        
        @include flexbox();
        @include align-items(center);
        @include themify($themes) {
          color: themed('social-icon-color');
        }
      }

      a {
        padding-left: 1rem;
        @include truncate($sidebar-width);
      }
    }
  }

  &__social {
    width: 100%;
    margin-top: 0.5rem;
    
    @include flexbox();
    @include flex-wrap(wrap);
    a {
      text-decoration: none !important;
      padding: 0.5rem;
      border-radius: 0.125rem;
      
      @include flexbox();
      @include flex-grow(1);
      @include align-items(center);
      @include justify-content(flex-start);
      @include themify($themes) {
        color: themed('social-icon-color');
        @include on-event {
          color: themed('social-icon-hover-color');
        }
      }
    }
  }

  &-hr {
    border-radius: 0.5rem;
  }
}