/* Fix for new_avatar.png cropping issue */
.avatar-group-wrapper {
    overflow: visible !important;
    position: relative !important;
    z-index: 20 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.avatar-img {
    width: 196.36px !important;
    height: 87.07px !important;
    border-radius: 0px !important;
    max-width: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: contain !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    /* FIX: Use smooth rendering for photos */
    image-rendering: auto !important;
    -ms-interpolation-mode: bicubic !important;

    /* Hardware acceleration */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;

    /* Smooth fonts/vectors */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    will-change: auto !important;
}

/* Mobile specific - ensure smooth scaling */
@media (max-width: 767px) {

    .avatar-img,
    .avatar-group-wrapper .avatar-img,
    .main-headline .avatar-group-wrapper img {
        /* Standard smooth scaling */
        image-rendering: auto !important;

        /* Allow natural aspect ratio and prevent upscaling beyond quality */
        width: auto !important;
        max-width: 130px !important;
        /* Cap width to prevent massive upscaling */
        height: auto !important;
        max-height: 56px !important;
        /* Cap height to match text line roughly */

        /* Minimum size safeguards */
        min-width: 60px !important;
        min-height: 25px !important;

        object-fit: contain !important;
        vertical-align: middle !important;
    }

    .avatar-group-wrapper {
        display: inline-flex !important;
        align-items: center !important;
        height: auto !important;
        margin-right: 5px !important;
    }
}