.avatar {
  line-height: 0;
  text-indent: -999em;
}
.avatar:after {
  content: '';
  display: block;
  background-color: var(--theme-background);
  background-image: url(/img/h-card--dark.svg);
  background-position: center;
  background-size: cover;
  padding: 50% 0;
  position: relative;
}

@media(prefers-color-scheme: dark) {
  .avatar:after {
    background-image: url(/img/h-card--light.svg);
  }
}