@media screen and (min-width: 768px) {
    :root {
        --star-size: 20px;
    }
}

@media screen and (min-width: 1000px) {
    :root {
        --star-size: 30px;
    }
}

@media screen and (min-width: 2000px) {
    :root {
        --star-size: 40px;
    }
}
:root {
    --star-color: gray;
    --star-background: #fc0;
}

.Stars {
    --percent: calc(var(--rating) / 5 * 100%);

    display: inline-block;
    font-size: var(--star-size);
    font-family: Times; // make sure ★ appears correctly
line-height: 1;

    &::before {
        content: '★★★★★';
        letter-spacing: 3px;
        background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}