.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
	line-height: 1;
}

.avatar--sm {
	width: 2rem;
	height: 2rem;
	font-size: 0.85rem;
}

.avatar--lg {
	width: 4.5rem;
	height: 4.5rem;
	font-size: 1.8rem;
}

.avatar--0 { background-color: #4c8c4a; }
.avatar--1 { background-color: #3f7ea8; }
.avatar--2 { background-color: #a8543f; }
.avatar--3 { background-color: #8c4a86; }
.avatar--4 { background-color: #b08a2e; }
.avatar--5 { background-color: #4a8c78; }
.avatar--6 { background-color: #6a5acd; }
.avatar--7 { background-color: #c1503f; }