diff --git a/src/styles/_card.scss b/src/styles/_card.scss index a5a1b0ed33..9b0841b179 100644 --- a/src/styles/_card.scss +++ b/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; diff --git a/src/styles/_price.scss b/src/styles/_price.scss index dc3664a55e..9ea19e3183 100644 --- a/src/styles/_price.scss +++ b/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; diff --git a/src/styles/_stars.scss b/src/styles/_stars.scss index 327276b543..c74cbda552 100644 --- a/src/styles/_stars.scss +++ b/src/styles/_stars.scss @@ -7,12 +7,14 @@ 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; } @@ -20,6 +22,7 @@ &__star:nth-child(n + 5) { background-image: url('../images/star.svg'); margin-right: 33px; + justify-content: space-between; } &__reviews { diff --git a/src/styles/index.scss b/src/styles/index.scss index 664f2675a5..6d4c8385ce 100644 --- a/src/styles/index.scss +++ b/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; }