.avatar {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
}

.avatar.size80,
.avatar.size80.frame::before {
    width: 5rem;
    min-width: 5rem;
}

.avatar.size60,
.avatar.size60.frame::before {
    width: 3.75rem;
    min-width: 3.75rem;
}

.avatar.size45,
.avatar.size45.frame::before {
    width: 2.8125rem;
    min-width: 2.8125rem;
}

.avatar.size35,
.avatar.size35.frame::before {
    width: 2.1875rem;
    min-width: 2.1875rem;
}

.avatar>img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.avatar.frame::before {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-image: var(--frame);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}