.rating {
    border: none;
    float: left;
}

.rating > input {
    display: none;
}

.rating > label:before {
    font-family: "Font Awesome 6 Sharp";
    display: inline-block;
    content: "\e28b";
}

.rating > label {
    color: #AC484D;
    float: right;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: #AC484D;
    font-weight: 900;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
    color: #AC484D;
}