:root {
    --feedback-star-size: 30px;
    --feedback-star-mobile-size: 12px;
    --feedback-star-image: url("/images/feedback/star.png");
    --feedback-star-mobile-image: url("/images/feedback/rating-star-not-active.png");
    --feedback-star-image-active: url("/images/feedback/star-active.png");
    --feedback-star-mobile-image-active: url("/images/feedback/rating-star-active.png");
}

.feedback-stars {
    display: grid;
    grid-template-columns: repeat(5, var(--feedback-star-size));
    grid-gap: 5px;
}

.feedback-star {
    height: var(--feedback-star-size);
    width: var(--feedback-star-size);
    background-image: var(--feedback-star-image);
    background-size: 100%;
    background-repeat: no-repeat;
}

.feedback-star.active {
    background-image: var(--feedback-star-image-active);
}

@media (max-width: 576px) {
    .rating-and-review .feedback-stars {
        grid-template-columns: repeat(5, var(--feedback-star-mobile-size));
        grid-gap: 1px;
    }

    .rating-and-review .feedback-star.active {
        background-image: var(--feedback-star-mobile-image-active);
    }

    .rating-and-review .feedback-star {
        height: var(--feedback-star-mobile-size);
        width: var(--feedback-star-mobile-size);
        background-image: var(--feedback-star-mobile-image);
        background-size: 100%;
        background-repeat: no-repeat;
    }
}