body {
    background: transparent;
}

.badge {
    max-width: none;
    padding: 0;
    margin-top: 10px;
    background: transparent;
}

.badge__comments {
    position: relative;
    height: 250px;
}

.comment {
    --row: 3;
    --gap: 30px;
    --width: calc((100% - (var(--gap) * (var(--row) - 1))) / var(--row));
    position: absolute;
    width: var(--width);
}

.comment__text {
    max-height: 140px;
}

.comment:nth-child(1) {
    left: 0%;
}

.comment:nth-child(2) {
    left: calc((var(--width) + var(--gap)) * 1);
}

.comment:nth-child(3) {
    left: calc((var(--width) + var(--gap)) * 2);
}

.comment:nth-child(4) {
    left: calc((var(--width) + var(--gap)) * 3);
}

.comment:nth-child(5) {
    left: calc((var(--width) + var(--gap)) * 4);
}

.badge__more-reviews-link-wrap:after {
    background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, 0)), to(var(--color)));
    background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0), var(--color));
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), var(--color));
}

.comment__read-more {
    background: -webkit-linear-gradient(left, hsla(0, 0%, 100%, 0), var(--color) 15px);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, var(--color) 15px);
}

@media only screen and (max-width: 800px) {
    .comment {
        --row: 2;
    }
}

@media only screen and (max-width: 600px) {
    .comment {
        --row: 1;
    }
}