hugo-theme-zzo/assets/sass/components/_bio.scss

.bio {
  @include flexbox();
  @include justify-content(center);
  @include align-items(flex-start);
  @include flex-direction(column);
  @include animation('slide-in-down-2 .5s .2s 1 ease both');

  width: 100%;
  font-family: 'Montserrat', sans-serif;

  &__photo {
    border-radius: 0.25rem;
    @include box-shadow(0, 8px, 6px, -6px, black);

    &-wrapper {
      width: 100%;
      height: 100%;
      border-radius: 0.25rem;  
      margin: 1rem auto;
      @include flexbox();
      @include align-items(center);
      @include justify-content(center);
      @include themify($themes) {
        background-color: themed('avatar-background-color');
      }
    }
  }

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

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

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

    &--icon {
      margin-right: 0.25rem;
      @include themify($themes) {
        color: themed('social-icon-color');
      }      
    }

    a {
      padding-right: 1rem;
      @include truncate(calcSideWidth());
    }
  }

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

  &__hr {
    margin: 1rem 0;
  }

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