.rating {
  position: relative;
  width: var(--rating-width, 150px);
  max-width: calc(100% + 2 * var(--rating-width, 150px) * 5 / 150);
  aspect-ratio: 150/20;
  margin-inline: calc(-1 * var(--rating-width, 150px) * 5 / 150);
}
.rating::before, .rating::after {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.rating::before {
  background-color: var(--slate-300);
  mask: url("../../img/rating.svg") center/contain;
}
.rating::after {
  background-color: var(--accent);
  mask: url("../../img/rating.svg") center/contain, linear-gradient(to right, transparent calc(100% * var(--rating, 5) / 5), #fff calc(100% * var(--rating, 5) / 5), #fff 100%);
  mask-composite: subtract;
}
@media (max-width: 739.98px) {
  .rating[data-rating] {
    display: grid;
    grid-auto-flow: column;
    column-gap: 6px;
    align-items: center;
    width: unset;
  }
  .rating[data-rating]::before, .rating[data-rating]::after {
    position: static;
    color: var(--yellow);
  }
  .rating[data-rating]::before {
    font-size: 22px;
    font-weight: 500;
    content: attr(data-rating);
    background: unset;
    mask: unset;
  }
  .rating[data-rating]::after {
    width: 20px;
    height: 20px;
    background-color: var(--yellow);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFBC00' d='M10 16.76 5.15 19.8c-.21.15-.44.2-.67.19a1.1 1.1 0 0 1-.61-.25 1.46 1.46 0 0 1-.41-.53 1.1 1.1 0 0 1-.06-.72l1.29-5.78-4.3-3.88a1.2 1.2 0 0 1-.36-.63 1.32 1.32 0 0 1 .4-1.24c.15-.14.36-.23.63-.27l5.67-.52L8.92.73c.1-.24.25-.42.45-.55C9.57.06 9.8 0 10 0c.21 0 .42.06.63.18.2.13.35.3.45.55l2.19 5.45 5.67.52c.27.04.48.13.64.27.15.14.27.33.35.55.08.23.1.46.04.69-.05.23-.17.44-.36.63l-4.3 3.88 1.29 5.78c.06.26.04.5-.06.72-.1.21-.23.39-.4.53a1.1 1.1 0 0 1-.62.25.99.99 0 0 1-.67-.19L10 16.76Z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}