.star {
    font-size: x-large;
    width: 50px;
    display: inline-block;
    color: gray;
    position:relative;
    text-align: center;
}
.star:last-child {
    margin-right: 0;
}
.star:before {
    content:'\2605';
}
.star.on {
    color: gold;
}
.star.half:after {
    content:'\2605';
    color: gold;
    position: absolute;
    margin-left: 0;
    width: 11px;
    left:14px;
    overflow: hidden;
}
@media (max-width: 767px) {
    .reiting-card .star {
        width: 30px;
    }
    .reiting-card .star.half:after {
        left: 4px;
    }
}
@media (max-width: 359px) {
    .reiting-card .star {
        width: 25px;
    }
    .reiting-card .star.half:after {
        left: 2px;
    }
}