diff --git a/src/index.html b/src/index.html
index e2a9bb42c9..5cfe02b30d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -39,6 +39,7 @@
               Apple
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="index.html"
@@ -47,6 +48,7 @@
               Samsung
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="index.html"
@@ -55,6 +57,7 @@
               Smartphones
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="index.html"
@@ -64,6 +67,7 @@
               Laptops & Computers
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="index.html"
@@ -72,6 +76,7 @@
               Gadgets
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="index.html"
@@ -80,6 +85,7 @@
               Tablets
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="index.html"
@@ -88,6 +94,7 @@
               Photo
             </a>
           </li>
+
           <li class="nav__item">
             <a
               href="index.html"
@@ -107,7 +114,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
@@ -142,7 +149,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
@@ -177,7 +184,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
@@ -212,7 +219,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
@@ -247,7 +254,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
@@ -282,7 +289,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
@@ -317,7 +324,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
@@ -352,7 +359,7 @@
         <img
           src="./images/imac.jpeg"
           alt="product-foto"
-          class="card__imac"
+          class="card__foto"
         />
         <div class="card__info">
           APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss
index 7f9638d9e8..28d530ba13 100644
--- a/src/styles/blocks/card.scss
+++ b/src/styles/blocks/card.scss
@@ -11,7 +11,7 @@
   text-align: center;
   flex-flow: column wrap;
 
-  &__imac {
+  &__foto {
     display: flex;
     justify-content: center;
     margin: 0 auto 40px;
diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss
index ba07fc2aba..841b4799b1 100644
--- a/src/styles/blocks/navigation.scss
+++ b/src/styles/blocks/navigation.scss
@@ -1,7 +1,5 @@
 @use '../utils/variables' as *;
 
-
-
 .nav {
   height: 60px;
 
@@ -32,26 +30,26 @@
     height: 60px;
     line-height: 60px;
     transition: 0.3s;
-  }
-
-  .is-active {
-    color: $blue;
-  }
 
-  .is-active::after {
-    content: '';
-    display: block;
-    height: 4px;
-    width: 100%;
-    border-radius: 8px;
-    background-color: $blue;
-    bottom: 0;
-    text-align: center;
-    position: absolute;
-    left: 0;
-  }
+    &.is-active {
+      color: $blue;
+
+      &::after {
+        content: '';
+        display: block;
+        height: 4px;
+        width: 100%;
+        border-radius: 8px;
+        background-color: $blue;
+        bottom: 0;
+        text-align: center;
+        position: absolute;
+        left: 0;
+      }
+    }
 
-  &__link[data-qa='nav-hover']:hover {
-    color: $blue;
+    &[data-qa='nav-hover']:hover {
+      color: $blue;
+    }
   }
 }
diff --git a/src/styles/index.css b/src/styles/index.css
deleted file mode 100644
index a1388af41c..0000000000
--- a/src/styles/index.css
+++ /dev/null
@@ -1,192 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: Roboto, arial, sans-serif;
-  margin: 0;
-  font-size: 12px;
-}
-
-.card {
-  display: grid;
-
-  max-width: 200px;
-  padding: 32px 16px 16px;
-  border-radius: 5px;
-  border: 1px solid rgb(243, 243, 243);
-  background: rgb(255, 255, 255);
-  flex-direction: column;
-  text-align: center;
-}
-
-.card__imac {
-  display: flex;
-  justify-content: center;
-  margin: 0 auto 40px;
-  width: 160px;
-  height: 134px;
-}
-
-.card__info {
-  color: rgb(6, 11, 53);
-  margin-bottom: 4px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  text-align: left;
-}
-
-.card__code {
-  margin-bottom: 16px;
-  font-size: 10px;
-  font-weight: 400;
-  min-height: 14px;
-  text-align: left;
-  color: rgb(97, 96, 112);
-}
-
-.card__button {
-  text-transform: uppercase;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  height: 40px;
-  width: 100%;
-  border: 1px solid rgb(0, 172, 220);
-  border-radius: 5px;
-  background-color: rgb(0, 172, 220);
-  color: rgb(255, 255, 255);
-  line-height: 16px;
-  font-size: 14px;
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.card__button:hover {
-  width: 100%;
-  cursor: pointer;
-  border: 1px solid rgb(0, 172, 220);
-  color: rgb(0, 172, 220);
-  background-color: rgb(255, 255, 255);
-}
-
-.card__price {
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.card__price-value {
-  font-size: 16px;
-  font-weight: 700;
-  text-align: right;
-  color: rgb(6, 11, 53);
-  line-height: 18px;
-}
-
-.card__price-text {
-  text-align: left;
-  color: rgb(97, 96, 112);
-  font-size: 12px;
-  font-weight: 400;
-}
-
-.card__reviews {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 24px;
-}
-
-.card__reviews .stars {
-  display: flex;
-  flex-direction: row;
-}
-
-.card__reviews .stars__star {
-  content: '';
-  background-image: url('../images/star.svg');
-  background-repeat: no-repeat;
-  background-position: center;
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
-}
-
-.card__reviews .stars__star:nth-child(-n + 4) {
-  background-image: url('../images/star-active.svg');
-}
-
-.card__reviews .card__reviews-rating {
-  display: flex;
-  align-items: flex-end;
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 14px;
-  color: rgb(6, 11, 53);
-}
-
-.header {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 50px;
-}
-
-.nav__list {
-  list-style-type: none;
-  display: flex;
-  padding-inline-start: 0;
-  margin: 0 -20px 0 0;
-}
-
-.nav__item {
-  position: relative;
-  margin: 0 20px 0 0;
-}
-
-.nav__link {
-  text-transform: uppercase;
-  text-decoration: none;
-  text-wrap: nowrap;
-  color: black;
-  font-style: normal;
-  font-weight: 500;
-  height: 60px;
-  line-height: 60px;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.is-active {
-  color: #00acdc;
-}
-
-.is-active::after {
-  content: '';
-  display: block;
-  height: 4px;
-  width: 100%;
-  border-radius: 8px;
-  background-color: #00acdc;
-  text-align: center;
-  bottom: 0;
-  position: absolute;
-  left: 0;
-}
-
-.nav__link[data-qa='hover']:hover {
-  color: #00acdc;
-}
-
-.img {
-  width: 40px;
-  height: 40px;
-  top: 10px;
-  left: 50px;
-  margin: 0 5px 0 0;
-}
diff --git a/src/styles/main.css b/src/styles/main.css
index 97af2220f8..40bd6da82e 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -9,13 +9,15 @@
   text-align: center;
   flex-flow: column wrap;
 }
-.card__imac {
+
+.card__foto {
   display: flex;
   justify-content: center;
   margin: 0 auto 40px;
   width: 160px;
   height: 134px;
 }
+
 .card__info {
   color: rgb(6, 11, 53);
   margin-bottom: 4px;
@@ -24,6 +26,7 @@
   line-height: 18px;
   text-align: left;
 }
+
 .card__code {
   margin-bottom: 16px;
   font-size: 10px;
@@ -32,6 +35,7 @@
   color: rgb(97, 96, 112);
   min-height: 14px;
 }
+
 .card__reviews-raiting {
   display: flex;
   align-items: flex-end;
@@ -39,6 +43,7 @@
   color: rgb(6, 11, 53);
   align-self: flex-end;
 }
+
 .card__button {
   text-transform: uppercase;
   justify-content: center;
@@ -55,6 +60,7 @@
   font-weight: 700;
   text-decoration: none;
 }
+
 .card__button:hover {
   width: 100%;
   cursor: pointer;
@@ -62,12 +68,14 @@
   color: rgb(0, 172, 220);
   background-color: rgb(255, 255, 255);
 }
+
 .card__price {
   margin-bottom: 16px;
   display: flex;
   justify-content: space-between;
   width: 100%;
 }
+
 .card__price-value {
   font-size: 16px;
   font-weight: 700;
@@ -75,6 +83,7 @@
   color: rgb(6, 11, 53);
   line-height: 18px;
 }
+
 .card__price-text {
   text-align: left;
   color: rgb(97, 96, 112);
@@ -88,22 +97,26 @@
   width: 100%;
   margin-bottom: 24px;
 }
+
 .card__reviews .stars {
   display: flex;
   flex-direction: row;
 }
+
 .card__reviews .stars__star {
-  content: "";
-  background-image: url("../images/star.svg");
+  content: '';
+  background-image: url('../images/star.svg');
   background-repeat: no-repeat;
   background-position: center;
   width: 16px;
   height: 16px;
   margin-right: 4px;
 }
-.card__reviews .stars__star:nth-child(-n+4) {
-  background-image: url("../images/star-active.svg");
+
+.card__reviews .stars__star:nth-child(-n + 4) {
+  background-image: url('../images/star-active.svg');
 }
+
 .card__reviews .card__reviews-rating {
   display: flex;
   align-items: flex-end;
@@ -136,36 +149,44 @@ body {
     grid-template-columns: repeat(1, 200px);
   }
 }
+
 @media (min-width: 488px) and (max-width: 767px) {
   .main {
     grid-template-columns: repeat(2, 200px);
   }
 }
+
 @media (min-width: 768px) and (max-width: 1023px) {
   .main {
     grid-template-columns: repeat(3, 200px);
   }
 }
+
 @media (min-width: 1024px) {
   .main {
     grid-template-columns: repeat(4, 200px);
   }
 }
+
 .nav {
   height: 60px;
 }
+
 .nav__list {
   list-style-type: none;
   display: flex;
   padding: 0;
   margin: 0;
 }
+
 .nav__item {
   margin-right: 20px;
 }
+
 .nav__item:last-child {
   margin-right: 0;
 }
+
 .nav__link {
   align-items: center;
   display: flex;
@@ -179,11 +200,13 @@ body {
   line-height: 60px;
   transition: 0.3s;
 }
-.nav .is-active {
+
+.nav__link.is-active {
   color: rgb(0, 172, 220);
 }
-.nav .is-active::after {
-  content: "";
+
+.nav__link.is-active::after {
+  content: '';
   display: block;
   height: 4px;
   width: 100%;
@@ -194,7 +217,8 @@ body {
   position: absolute;
   left: 0;
 }
-.nav__link[data-qa=nav-hover]:hover {
+
+.nav__link[data-qa='nav-hover']:hover {
   color: rgb(0, 172, 220);
 }
 
@@ -205,12 +229,11 @@ body {
   padding: 0 50px;
   background-color: rgb(255, 255, 255);
 }
+
 .header__img {
   display: block;
   width: 40px;
   height: 40px;
 }
 
-
-
 /*# sourceMappingURL=main.css.map */
diff --git a/src/styles/main.css.map b/src/styles/main.css.map
index 2783570b29..2e4d108bef 100644
--- a/src/styles/main.css.map
+++ b/src/styles/main.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["blocks/card.scss","utils/variables.scss","blocks/stars.scss","blocks/reset.scss","blocks/navigation.scss","blocks/header.scss","main.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA,OCCO;EDAP;EACA;EACA;EACA,YCNW;EDOX;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE,OCpBQ;EDqBR;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,aC7BU;ED8BV;EACA,OCnCG;EDoCH;;AAGF;EACE;EACA;EACA;EACA,OCzCQ;ED0CR;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,kBCzDG;ED0DH,OCxDS;ED0DT;EACA;EACA,aC1DO;ED2DP;;AAEA;EACE;EACA;EACA;EACA,OCrEC;EDsED,kBCpEO;;ADwEX;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,aC9EK;ED+EL;EACA,OCnFM;EDoFN;;AAGF;EACE;EACA,OC3FC;ED4FD;EACA,aCzFQ;;;ACFd;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA,aD3BU;EC4BV;EACA,OD/BQ;;;AEAZ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;ACpCJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,OH1BQ;EG2BR;EACA;EACA;EACA;EACA;;AAGF;EACE,OHpCG;;AGuCL;EACE;EACA;EACA;EACA;EACA;EACA,kBH7CG;EG8CH;EACA;EACA;EACA;;AAGF;EACE,OHrDG;;;AICP;EACE;EACA;EACA;EACA;EACA,kBJJW;;AIMX;EACE;EACA;EACA;;;ACNJ","file":"main.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["blocks/card.scss","utils/variables.scss","blocks/stars.scss","blocks/reset.scss","blocks/navigation.scss","blocks/header.scss","main.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA,OCCO;EDAP;EACA;EACA;EACA,YCNW;EDOX;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE,OCpBQ;EDqBR;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA,aC7BU;ED8BV;EACA,OCnCG;EDoCH;;AAGF;EACE;EACA;EACA;EACA,OCzCQ;ED0CR;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA,kBCzDG;ED0DH,OCxDS;ED0DT;EACA;EACA,aC1DO;ED2DP;;AAEA;EACE;EACA;EACA;EACA,OCrEC;EDsED,kBCpEO;;ADwEX;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,aC9EK;ED+EL;EACA,OCnFM;EDoFN;;AAGF;EACE;EACA,OC3FC;ED4FD;EACA,aCzFQ;;;ACFd;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA,aD3BU;EC4BV;EACA,OD/BQ;;;AEAZ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;ACtCJ;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA,OHxBQ;EGyBR;EACA;EACA;EACA;EACA;;AAEA;EACE,OHjCC;;AGmCD;EACE;EACA;EACA;EACA;EACA;EACA,kBHzCD;EG0CC;EACA;EACA;EACA;;AAIJ;EACE,OHlDC;;;AICP;EACE;EACA;EACA;EACA;EACA,kBJJW;;AIMX;EACE;EACA;EACA;;;ACNJ","file":"main.css"}
\ No newline at end of file