/* CSS for ProjectList component */
.avatar-wrapper {
    position: relative;
/*    width: 4.5rem;
    height: 4.5rem;*/
}
.img-avatar-customxl {
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}

.img-avatar-3xl {
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}
.img-avatar-2xl {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
}
.img-avatar-xl {
    width: 2rem;
    height: 2rem;
    display: block;
}
/*.avatar-wrapper > img:first-child {
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}
*/

.avatar-wrapper .avatar-3xl + .avatar-corner,
.avatar-wrapper .img-avatar-3xl + .avatar-corner {
    width: 3.7rem;
    height: 3.7rem;
}
.avatar-wrapper .avatar-2xl + .avatar-corner,
.avatar-wrapper .img-avatar-2xl + .avatar-corner {
    width: 2.7rem;
    height: 2.7rem;
}
.avatar-wrapper .avatar-xl + .avatar-corner,
.avatar-wrapper .img-avatar-xl + .avatar-corner {
    width: 2.2rem;
    height: 2.2rem;
    top: -2px;
    left: -1px;
}


.avatar-wrapper .avatar-customxl + .avatar-corner,
.avatar-wrapper .img-avatar-customxl + .avatar-corner {
    width: 4.8rem;
    height: 4.8rem;
}

.avatar-corner {
    position: absolute;
    inset: 0;
    top: -2px;
    left: -2px;
    pointer-events: none;
}

.avatar-customxl {
    height: 4.5rem;
    width: 4.5rem;
}

    .avatar-customxl .avatar-name {
        font-size: 2rem;
    }