@layer components {
  .avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background-color: oklch(var(--lch-primary) / 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-primary-hover);
  }

  .avatar--lg {
    width: 4rem;
    height: 4rem;
    font-size: var(--text-xl);
  }

  .avatar--xl {
    width: 6rem;
    height: 6rem;
    font-size: var(--text-3xl);
  }
}