.avatar{
    inline-size: 48px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    overflow: hidden;
    
    @media screen and (width>=768px){
        inline-size: 64px;
    }
}

.avatar--sm{
    inline-size: 48px;

    @media screen and (width>=768px) {
        inline-size: 64px;
        
    }
}

.avatar--md{
    inline-size: 96px;

    @media screen and (width >=768px){
        inline-size: 116px;
    }
}

.avatar--lg{
    inline-size: 128px;

    @media screen and (width>=768px) {
        inline-size: 132px;
    }
}

.avatar--xl{
    inline-size: 132px;

    @media screen and (width >=768px) {
        inline-size: 145px;
    }
}

.avatar--default{
    background: radial-gradient(50% 50% at 50% 50%, #C5CBFF 0%, #929DFF 100%);
}

.avatar--accent{
    background: #8CF08A;
}

.avatar--square{
    border-radius: 15px;

    @media screen and (width >=768px) {
        border-radius: 22px;
    }
}

.avatar--rounded{
    border-radius: 50%;
}

.avatar--outlined{
    border: 17px solid #B7C3E933;
}

.avatar__img{
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: top center;
}