<div class="avatar__basic-s border--rad-f">
    <img class="avatar__img" src="../assets/images/face_3.jpg" srcset="
                      ../assets/images/face_3.jpg 1x,
                      ../assets/images/face_3.jpg 2x
                    " alt="face demo" />
</div>
<div class="avatar__basic-m border--rad-f">
    <img class="avatar__img" src="../assets/images/face_5.jpg" srcset="
                      ../assets/images/face_5.jpg 1x,
                      ../assets/images/face_5.jpg 2x
                    " alt="face demo" />
</div>
<div class="avatar__basic-l border--rad-f">
    <img class="avatar__img" src="../assets/images/face_1.jpg" srcset="
                      ../assets/images/face_1.jpg 1x,
                      ../assets/images/face_1.jpg 2x
                    " alt="face demo" />
</div>
<div class="avatar__basic-xl border--rad-f">
    <img class="avatar__img" src="../assets/images/face_4.jpg" srcset="
                      ../assets/images/face_4.jpg 1x,
                      ../assets/images/face_4.jpg 2x
                    " alt="face demo" />
</div>