@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-6dfbdb4b-3af1-4730-8c21-edf7fdbeac15);
    background-size: cover;
}
.cmavatar2 {
    background: var(--wpr-bg-369a9e16-2824-4fb6-897c-ddee4ab5ba80);
    background-size: cover;
}
.cmavatar3 {
    background: var(--wpr-bg-47eebdc2-5470-4a4e-81ef-4d68d3f4e3c1);
    background-size: cover;
}
.cmavatar4 {
    background: var(--wpr-bg-bc42d727-bce5-45bc-8b87-94ebf9bb9424);
    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;
}