.avatar
{
  @include aspect-ratio(100%, 100%);

  border-radius: 100%;
  background-color: $black-light;
  background-size: cover;
  background-position: center;

  margin: 0 auto;
  width: 2.5em;
  height: 2.5em;

  >*
  {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
  }

  span // initial
  {
    right: 0;
    transform: translateY(calc(50% - .05em));
    font-size: 1.75em;
    color: white;
    font-family: monospace;
    text-align: center;
    height: 100%;
    line-height: 0;
    text-transform: uppercase;
  }

  svg
  {
    transform: scale(.6);
  }
}