test task solution

src/styles/_card.scss

@@ -1,16 +1,22 @@
-.card__image {
-  width: 160px;
-  height: 134px;
-  background-image: url('../images/imac.jpeg');
+.card {
+  border: 1px solid #f3f3f3;
+  border-radius: 5px;
+  flex-direction: column;
+
+  &__image {
+    width: 160px;
+    height: 134px;
+    background-image: url('../images/imac.jpeg');
+  }
 }
 
 .title {
   display: inline;
 
-
   &__text {
     @include roboto500;
 
+    top: 40px;
     font-size: 12px;
     line-height: 18px;
     color: #060b35;

src/styles/_price.scss

@@ -1,9 +1,5 @@
 .price {
-  display: flex;
-  justify-content: space-between;
-  width: $primary-width;
-  height: 18px;
-  margin-top: 24px;
+  width: 100%;
 
   &__text {
     @include roboto400;

src/styles/_stars.scss

@@ -7,19 +7,22 @@
 
   line-height: 14px;
   margin-top: 16px;
-  width: $primary-width;
+  width: 100%;
 
   &__star {
     background-position: center;
     width: 16px;
     height: 16px;
+    margin: 4px;
+    justify-content: space-between;
     background-image: url('../images/star-active.svg');
     background-repeat: no-repeat;
   }
 
   &__star:nth-child(n + 5) {
     background-image: url('../images/star.svg');
     margin-right: 33px;
+    justify-content: space-between;
   }
 
   &__reviews {

src/styles/index.scss

@@ -1,19 +1,13 @@
-@use './mixins' as *;
-@use './variables' as *;
-@use './card' as *;
-@use './stars' as *;
-@use './price' as *;
-@use './button' as *;
+@import './mixins';
+@import './variables';
+@import './card';
+@import './stars';
+@import './price';
+@import './button';
 
 body {
   @include center;
   @include roboto400;
 
-  border: 1px;
-  border-color: #f3f3f3;
-  border-radius: 5px;
   margin: 0;
-  width: 198px;
-  height: 406px;
-  flex-direction: column;
 }