:root {
  --ifm-avatar-intro-margin:1rem;
  --ifm-avatar-intro-alignment:inherit;
  --ifm-avatar-photo-size-sm:2rem;
  --ifm-avatar-photo-size-md:3rem;
  --ifm-avatar-photo-size-lg:4rem;
  --ifm-avatar-photo-size-xl:6rem;
}

.avatar {
  display: flex;
}

.avatar__photo-link {
  display: block;
}

.avatar__photo {
  overflow: hidden;
  border-radius: 50%;
  height: var(--ifm-avatar-photo-size-md);
  width: var(--ifm-avatar-photo-size-md);
}

.avatar__photo--sm {
  height: var(--ifm-avatar-photo-size-sm);
  width: var(--ifm-avatar-photo-size-sm);
}

.avatar__photo--lg {
  height: var(--ifm-avatar-photo-size-lg);
  width: var(--ifm-avatar-photo-size-lg);
}

.avatar__photo--xl {
  height: var(--ifm-avatar-photo-size-xl);
  width: var(--ifm-avatar-photo-size-xl);
}

.avatar__photo + .avatar__intro {
  margin-left: var(--ifm-avatar-intro-margin);
}

.avatar__intro {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  justify-content: center;
  text-align: var(--ifm-avatar-intro-alignment);
}

.avatar__name {
  margin: 0;
}

.avatar__subtitle {
  margin-top: 0.25rem;
}

.avatar--vertical {
  --ifm-avatar-intro-alignment:center;
  --ifm-avatar-intro-margin:0.5rem;
  align-items: center;
  flex-direction: column;

  .avatar__intro {
    margin-left: 0;
  }
}