:root {
  --Avatar-size: var(--gap-xl);
}

.Avatar {
  align-items: center;
  background-color: var(--avatar-bg-color, var(--color-gray2));
  border-radius: 50%;
  color: var(--color-black);
  display: flex;
  font-size: calc(var(--Avatar-size) / 3);
  height: var(--Avatar-size);
  justify-content: center;
  position: relative;
  text-transform: uppercase;
  user-select: none;
  width: var(--Avatar-size);

  img {
    border-radius: 50%;
    bottom: 0;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
}
