<div class="avatar">
    <img src="./public/avatar-200.jpg" alt="avatar" class="avatar__img">
</div>
                            

.avatar {
    width: 10em;
    height: 10em;
}

.avatar__img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar_main-page-preview {
    transform: translateY(-1.3em);
}

.avatar_component-page {
    font-size: 20px;
}

@media screen and (max-width: 768px) {
    .avatar_main-page-preview {
        font-size: 11.6px;
        transform: translateY(0);
    }
}