.rating {
    --percentage: 100%;
    --filled-color: orange;
    --empty-color: #dadce0;
    --scale: 1.3;

    clip-path: polygon(6px 0,4.31px 3.98px,0 4.34px,3.28px 7.18px,2.29px 11.4px,6px 9.16px,9.71px 11.4px,8.72px 7.18px,12px 4.34px,7.69px 3.98px,6px 0,20px 0,18.31px 3.98px,14px 4.34px,17.28px 7.18px,16.29px 11.4px,20px 9.16px,23.71px 11.4px,22.72px 7.18px,26px 4.34px,21.69px 3.98px,20px 0,34px 0,32.31px 3.98px,28px 4.34px,31.28px 7.18px,30.29px 11.4px,34px 9.16px,37.71px 11.4px,36.72px 7.18px,40px 4.34px,35.69px 3.98px,34px 0,48px 0,46.31px 3.98px,42px 4.34px,45.28px 7.18px,44.29px 11.4px,48px 9.16px,51.71px 11.4px,50.72px 7.18px,54px 4.34px,49.69px 3.98px,48px 0,62px 0,60.31px 3.98px,56px 4.34px,59.28px 7.18px,58.29px 11.4px,62px 9.16px,65.71px 11.4px,64.72px 7.18px,68px 4.34px,63.69px 3.98px,62px 0);
    width: 68px;
    height: 11.4px;
    display: inline-block;
    background: linear-gradient(to right, var(--filled-color) var(--percentage), var(--empty-color) 0%);
    transform: scale(var(--scale));
    transform-origin: left center;
    margin-right: calc(calc(68px * var(--scale)) - 68px);
}

.rating-1 {
    --percentage: 20%;
}

.rating-2 {
    --percentage: 40%;
}

.rating-3 {
    --percentage: 60%;
}

.rating-4 {
    --percentage: 80%;
}

.rating-5 {
    --percentage: 100%;
}

.reviews-carousel .review-item {
    width: 100%;
}

@media (min-width: 992px) {
    .reviews-carousel .review-item {
        width: calc((100% - 2rem) / 3);
    }
}