.card {
    background: #fff;
    padding: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    /* text-align: center; */
    width: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    transform: translateX(-50px);
    border-radius: 12px;
    margin: 10px;

    display: flex;
    align-items: center;          
    justify-content: space-between;   /* центрируем содержимое */
}
.card.visible {
    opacity: 1;
    transform: translateX(0);
}
.avatar {
    width: 40px;      
    height: 40px;
    border-radius: 50%;
    object-fit: cover; 
    border: 2px solid #eeeeee; 

}
.name_avatar {
    width: 100px;
    text-align: center;   
    font-size: 12px;
    color: #333;
    background: pink;
}