/* A fixed square wrapper prevents portrait photos and flex/grid sizing from making ovals. */
.app-user-avatar,.profile-avatar,.profile-photo-avatar,.social-avatar{
  --avatar-size:44px;
  position:relative;
  width:var(--avatar-size);
  height:var(--avatar-size);
  min-width:var(--avatar-size);
  max-width:var(--avatar-size);
  min-height:var(--avatar-size);
  max-height:var(--avatar-size);
  flex:0 0 var(--avatar-size);
  aspect-ratio:1 / 1;
  border-radius:50%;
  overflow:hidden;
  box-sizing:border-box;
}
.app-user-avatar{--avatar-size:34px}
.profile-avatar{--avatar-size:58px}
.profile-photo-avatar{--avatar-size:88px}
.social-reply .social-avatar{--avatar-size:30px}
.app-user-avatar>img,.profile-avatar>img,.profile-photo-avatar>img,.social-avatar>img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
}
@media(max-width:680px){.profile-avatar{--avatar-size:48px}}