add solution

[save-v]

• DEMO LINK

• [TEST REPORT LINK](https://save-v.github.io/layout_product-cards/report/

• there 2 BEM blocks card and stars each in it own file

• SCSS Nesting is used for elements, modifiers and pseudo-classes

• SCSS Variables are used for main values and placed in a separate file

• all stars--N modifiers work as expected (Highlight first N stars)

• Code follows all the Code Style Rules ❗️

[mateacademy-ai-mentor]

Great job on the SCSS files! 🎉 The issues noted are minor style inconsistencies that don't affect the functionality. Consider adjusting the spacing and nesting for improved code style in future updates. Keep up the good work!

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

[mateacademy-ai-mentor]

It seems like the selector for &_label is nested under &__price. Ensure that this is intentional and aligns with your design requirements. If &_label is meant to be a standalone element, consider adjusting its placement.

[mateacademy-ai-mentor]

Similar to the previous comment, verify that &_value is correctly nested under &__price. If it should be a separate element, you might want to adjust its nesting.

[mateacademy-ai-mentor]

There is an extra space between '&--1' and ':nth-child(-n + 1)'. According to the code style rules, there should be no space between the element and the pseudo-class.

[mateacademy-ai-mentor]

There is an extra space between '&--2' and ':nth-child(-n + 2)'. According to the code style rules, there should be no space between the element and the pseudo-class.

[mateacademy-ai-mentor]

There is an extra space between '&--3' and ':nth-child(-n + 3)'. According to the code style rules, there should be no space between the element and the pseudo-class.

[mateacademy-ai-mentor]

There is an extra space between '&--4' and ':nth-child(-n + 4)'. According to the code style rules, there should be no space between the element and the pseudo-class.

[mateacademy-ai-mentor]

There is an extra space between '&--5' and ':nth-child(-n + 5)'. According to the code style rules, there should be no space between the element and the pseudo-class.

[VolodymyrKirichenko]

Overall - good, but let's make some fixes 🥹

[VolodymyrKirichenko]

don't forget about indents. It will be more readable

Suggested change

	<img
	class="product-card__image"
	src="images/imac.jpeg"
	alt="iMac Image"
	/>
	<a
	class="product-card__name"
	href="#"
	>
	APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
	</a>
	<p class="product-card__code">Product code: 195434</p>
	<img
	class="product-card__image"
	src="images/imac.jpeg"
	alt="iMac Image"
	/>
	<a
	class="product-card__name"
	href="#"
	>
	APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
	</a>
	<p class="product-card__code">Product code: 195434</p>

[VolodymyrKirichenko]

don't use positioning on body tag. Use a separate class - .body for it

Suggested change

	body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	font-family: Roboto, sans-serif;
	}
	body {
	margin: 0;
	padding: 0;
	font-family: Roboto, sans-serif;
	}

[VolodymyrKirichenko]

u can move it to reset.scss file in which u will be reset values ​​and only this

[VolodymyrKirichenko]

create variables for all colors

[VolodymyrKirichenko]

margin top?

[VolodymyrKirichenko]

u can use just background. Check doc - background

Suggested change

	background-image: url(../images/star.svg);
	background-repeat: no-repeat;
	background-position: center;
	background: .......

[VolodymyrKirichenko]

1. Never use !important !!!
   this may lead to conflicts in the future
2. U can modify ur syntax

Suggested change

	&--1 :nth-child(-n + 1) {
	background-image: url(../images/star-active.svg) !important;
	}
	&--2 :nth-child(-n + 2) {
	background-image: url(../images/star-active.svg);
	}
	&--3 :nth-child(-n + 3) {
	background-image: url(../images/star-active.svg);
	}
	&--4 :nth-child(-n + 4) {
	background-image: url(../images/star-active.svg);
	}
	&--5 :nth-child(-n + 5) {
	background-image: url(../images/star-active.svg);
	}
	&--1 :nth-child(1),
	&--2 :nth-child(-n + 2),
	&--3 :nth-child(-n + 3),
	&--4 :nth-child(-n + 4),
	&--5 :nth-child(-n + 5) {
	background-image: url(../images/star-active.svg);
	}

[VolodymyrKirichenko]

this is not correct. Don't hardcode ur width. This must be a dynamic value
For all the cases!

Suggested change

	@include blocks-width;
	width: 100%

[VolodymyrKirichenko]

u don't need this variables. It doesn't make sense

Suggested change

	$card-border-width: 1px;
	$card-padding: 16px;
	$card-width: 200px;
	$blocks-width: 166px;