@media only screen and (max-width: 600px) {
    #cm-avatar{
        flex-direction: column;
    }
}
#avatar-text{
    margin-bottom: 16px;
    line-height: 1.5em;
    text-align: justify;
    font-size: 16px;
}
.avatars span:nth-child(1){
    margin-right: 0;
}

.cm-avatar {
    display: flex;
    margin: 20px 0;
    align-items: center;
    justify-content: space-between
}

.avatars span:hover {
    box-shadow: 0 3px 10px -3px #551bf8;
}

.avatars span {
    display: inline-block;
    width: 56px;
    height: 56px;
    margin-right: 10px;

    border-radius: 40px;
    box-shadow: 0 3px 10px -3px #ccc;
    transition: all 0.2s linear;
    cursor: pointer;
    filter: grayscale(1);
}
.cmavatar1{
    background: var(--wpr-bg-b6f81188-3e91-424e-b696-8978d33bb9a8);
    background-size: cover;
}
.cmavatar2 {
    background: var(--wpr-bg-5dec102f-9268-494b-bba5-4d485f2ce37f);
    background-size: cover;
}
.cmavatar3 {
    background: var(--wpr-bg-0d795d09-6e28-4ba4-85ed-af37de15a78a);
    background-size: cover;
}
.cmavatar4 {
    background: var(--wpr-bg-804af1d3-0391-4ae4-8ec2-c52134fa1c2a);
    background-size: cover;
}
.avatars span.active {
    box-shadow: 0 3px 10px -3px #551bf8;
    filter: grayscale(0);
}



span.comment-author.avatars span {
    filter: grayscale(0);
    margin: 0;
    cursor: auto;
}