.ratingStars>div {
    display: inline-block;
}
.ratingStars>div.star::before {
    content: "★ ";
    font-size: 180%;
}
.ratingStars>div.yellowStar::before {
    color: #ffc700;
}
.ratingStars>div.grayStar::before {
    color: #ccc;
}
:root {
    --star-size: 180%;
    --star-color: #ccc;
    --star-background: #ffc700;
}

.stars-landing {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    line-height: 1;
    text-align:left;
    letter-spacing: 1px;
    padding-left:0;
    padding-right:0;
    /*margin-left: 12px;*/
}

.stars-landing::before {
    content: '★★★★★';
    letter-spacing: 1px;
    background:
            linear-gradient(90deg, var(--star-background) 0%, var(--star-background) var(--percent), #ccc var(--percent), #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*transform: translatey(60px);*/
    display: block;
    position: relative;
}