.rating {
	position: relative;
	width: fit-content;
	display: inline-block;
	font-size: 36px;
	line-height: 1;
	--value: 0;
	--max: 5;
}

.rating__base {
	font-size: 1.75rem;
	color: #a7aebe;
}

.rating__fill {
	font-size: 1.75rem;
	color: #fac520;
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	overflow: hidden;

	width: calc(var(--value) / var(--max) * 100%);
}

.rating-label {
	margin-bottom: 4px;
	font-size: 14px;
	opacity: 0.8;
}

.rating-block {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.rating-label {
	font: inherit;
	white-space: nowrap;
	margin-top: 5px;
}

@media (max-width: 767px) {
	.rating,
	.rating__base,
	.rating__fill{
		font-size: 1.5rem;
	}
}