// user avatars .avatar { border-radius: 100%; position: relative; display: inline-block; vertical-align: middle; text-align: center; overflow: hidden; width: 50px; height: 50px; img { position: absolute; z-index: 2; top: 0; inset-inline-start: 0; inset-inline-end: 0; border: 0; object-fit: cover; width: 100%; height: 100%; } &.small { vertical-align: middle; margin: 0 0.5em; width: 25px; height: 25px; } &.large { @include media-breakpoint-up(sm) { width: 70px; height: 70px; } } &.square { border-radius: 0; } }