div.star-rating, div.fake-star-rating {
    display: grid;
    grid-template: max-content max-content / 20% 20% 20% 20% 20%;
    margin-left: auto;
    margin-right: auto;
    width: 20em;
}
div.star-rating > :nth-child(1), div.fake-star-rating > :nth-child(1) {
    grid-area: 1 / 5;
}
div.star-rating > :nth-child(2), div.fake-star-rating > :nth-child(2) {
    grid-area: 2 / 5;
}
div.star-rating > :nth-child(3), div.fake-star-rating > :nth-child(3) {
    grid-area: 1 / 4;
}
div.star-rating > :nth-child(4), div.fake-star-rating > :nth-child(4) {
    grid-area: 2 / 4;
}
div.star-rating > :nth-child(5), div.fake-star-rating > :nth-child(5) {
    grid-area: 1 / 3;
}
div.star-rating > :nth-child(6), div.fake-star-rating > :nth-child(6) {
    grid-area: 2 / 3;
}
div.star-rating > :nth-child(7), div.fake-star-rating > :nth-child(7) {
    grid-area: 1 / 2;
}
div.star-rating > :nth-child(8), div.fake-star-rating > :nth-child(8) {
    grid-area: 2 / 2;
}
div.star-rating > :nth-child(9), div.fake-star-rating > :nth-child(9) {
    grid-area: 1 / 1;
}
div.star-rating > :nth-child(10), div.fake-star-rating > :nth-child(10) {
    grid-area: 2 / 1;
}
div.star-rating label, div.fake-star-rating span {
    text-align: center;
}
div.star-rating input[type=radio], div.fake-star-rating > div.star {
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 2em;
    height: 2em;
}
div.star-rating input[type=radio] {
    appearance: none;
}
div.star-rating input[type=radio], div.star-rating label {
    cursor: pointer;
}
div.star-rating input[type=radio], div.fake-star-rating > div.star {
    background-image: url('/static/images/empty_star.png');
}
div.star-rating:not(:hover) input[type=radio]:checked, div.star-rating:not(:hover) input[type=radio]:checked ~ input[type=radio], div.star-rating input[type=radio]:hover, div.star-rating input[type=radio]:hover ~ input[type=radio] {
    background-image: url('/static/images/filled_star.png');
}