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 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));
    @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);

    &--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);
    }
  }

  &__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;
  }
}