/*
 * Shared avatar rendering.
 *
 * Small avatars in comments and recipe cards remain circular.
 * Large public-profile avatars use the same rounded-square
 * geometry as the authenticated account page.
 */

.recipe-comment-avatar,
.recipe-author-avatar {
    overflow: hidden;
}


.public-profile-avatar {
    width: 82px;
    height: 82px;

    min-width: 82px;
    flex: 0 0 82px;

    overflow: hidden;

    border-radius: 24px;
}


.recipe-comment-avatar-image,
.recipe-author-avatar-image,
.public-profile-avatar-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    border-radius: inherit;
}


@media (max-width: 640px) {

    .public-profile-avatar {
        width: 72px;
        height: 72px;

        min-width: 72px;
        flex-basis: 72px;

        border-radius: 21px;
    }
}