solution

[kripikripi]

• DEMO LINK

• TEST REPORT LINK

• 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 ❗️

[mgrinko]

Я б форматував так

Suggested change

	<div
	class="card"
	data-qa="card"
	>
	<img
	src="../src/images/imac.jpeg"
	alt="imac"
	class="card__image"
	/>
	<main class="card__content">
	<h2 class="card__title">
	APPLE A1419 iMac 27" Retina
	<br />
	5K Monoblock (MNED2UA/A)
	</h2>
	<span class="card__code">Product code: 195434</span>
	<div class="card__review">
	<div class="stars stars--4">
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	</div>
	<span>Reviews: 5</span>
	</div>
	<div class="card__price">
	<span class="card__pricetext">Price:</span>
	<span class="card__pricevalue">$2,199</span>
	</div>
	<button
	data-qa="hover"
	class="card__button"
	>
	BUY
	</button>
	</main>
	</div>
	<div class="card" data-qa="card">
	<img
	src="../src/images/imac.jpeg"
	alt="imac"
	class="card__image"
	/>
	<main class="card__content">
	<h2 class="card__title">
	APPLE A1419 iMac 27" Retina
	<br />
	5K Monoblock (MNED2UA/A)
	</h2>
	<span class="card__code">Product code: 195434</span>
	<div class="card__review">
	<div class="stars stars--4">
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	<div class="stars__star"></div>
	</div>
	<span>Reviews: 5</span>
	</div>
	<div class="card__price">
	<span class="card__pricetext">Price:</span>
	<span class="card__pricevalue">$2,199</span>
	</div>
	<button
	data-qa="hover"
	class="card__button"
	>
	BUY
	</button>
	</main>
	</div>

[mgrinko]

Це завершений шматок інформації
тож семантично це параграф