.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $dark;
    border-radius: 50%;
    color: $light;
    font-weight: bold;
    text-decoration: none;

    &-small {
        $size: 3rem;
        width: $size;
        height: $size;
        font-size: $size *2/3;
    }

    &-medium {
        $size: 5rem;
        width: $size;
        height: $size;
        font-size: $size *2/3;
    }

    &-large {
        $size: 8rem;
        width: $size;
        height: $size;
        font-size: $size *2/3;
    }
}

.avatar-box {
    text-decoration: none;
}