diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
new file mode 100644
index 0000000000..8b5743ecb4
--- /dev/null
+++ b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/package-lock.json b/package-lock.json
index 6dd164c6e0..98c6022679 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@mate-academy/backstop-config": "latest",
         "@mate-academy/bemlint": "latest",
         "@mate-academy/linthtml-config": "latest",
-        "@mate-academy/scripts": "^1.8.6",
+        "@mate-academy/scripts": "^2.1.3",
         "@mate-academy/stylelint-config": "latest",
         "@parcel/transformer-sass": "^2.12.0",
         "backstopjs": "6.3.23",
@@ -1212,10 +1212,11 @@
       "dev": true
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz",
-      "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz",
+      "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@octokit/rest": "^17.11.2",
         "@types/get-port": "^4.2.0",
@@ -1242,546 +1243,15 @@
       }
     },
     "node_modules/@mate-academy/stylelint-config": {
-      "version": "0.0.12",
-      "resolved": "https://registry.npmjs.org/@mate-academy/stylelint-config/-/stylelint-config-0.0.12.tgz",
-      "integrity": "sha512-KVf6pK0SwFP4zYfNkj68+LuHRPzx/F5GNeCaPQQauDm3X08Crj/X15fu/l9XvUD2ttEAi8dcASSABuGx54rPVA==",
-      "dev": true,
-      "dependencies": {
-        "stylelint-config-standard-scss": "^11.1.0",
-        "stylelint-scss": "^5.3.0"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/balanced-match": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
-      "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/camelcase": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/camelcase-keys": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
-      "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "camelcase": "^6.3.0",
-        "map-obj": "^4.1.0",
-        "quick-lru": "^5.1.1",
-        "type-fest": "^1.2.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/cosmiconfig": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
-      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "import-fresh": "^3.3.0",
-        "js-yaml": "^4.1.0",
-        "parse-json": "^5.2.0",
-        "path-type": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/d-fischer"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.9.5"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/decamelize": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz",
-      "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/file-entry-cache": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz",
-      "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "flat-cache": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/flat-cache": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
-      "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "flatted": "^3.2.9",
-        "keyv": "^4.5.3",
-        "rimraf": "^3.0.2"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/indent-string": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
-      "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/known-css-properties": {
-      "version": "0.29.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
-      "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
-      "dev": true
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/meow": {
-      "version": "10.1.5",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz",
-      "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/minimist": "^1.2.2",
-        "camelcase-keys": "^7.0.0",
-        "decamelize": "^5.0.0",
-        "decamelize-keys": "^1.1.0",
-        "hard-rejection": "^2.1.0",
-        "minimist-options": "4.1.0",
-        "normalize-package-data": "^3.0.2",
-        "read-pkg-up": "^8.0.0",
-        "redent": "^4.0.0",
-        "trim-newlines": "^4.0.2",
-        "type-fest": "^1.2.2",
-        "yargs-parser": "^20.2.9"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/postcss-safe-parser": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
-      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3.3"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/read-pkg": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
-      "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^3.0.2",
-        "parse-json": "^5.2.0",
-        "type-fest": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/read-pkg-up": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
-      "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/@mate-academy/stylelint-config/-/stylelint-config-0.0.15.tgz",
+      "integrity": "sha512-5b4bKqbfx2sWbdZdidabO8XZCdmQSeJD+FZSziarKmpgQMM+5i2bnIKhCdnEpFlVdfzCA6AyQfskFHG2SEoe/g==",
       "dev": true,
-      "peer": true,
+      "license": "ISC",
       "dependencies": {
-        "find-up": "^5.0.0",
-        "read-pkg": "^6.0.0",
-        "type-fest": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/redent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
-      "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "indent-string": "^5.0.0",
-        "strip-indent": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/strip-indent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
-      "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "min-indent": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/stylelint": {
-      "version": "15.11.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz",
-      "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@csstools/css-parser-algorithms": "^2.3.1",
-        "@csstools/css-tokenizer": "^2.2.0",
-        "@csstools/media-query-list-parser": "^2.1.4",
-        "@csstools/selector-specificity": "^3.0.0",
-        "balanced-match": "^2.0.0",
-        "colord": "^2.9.3",
-        "cosmiconfig": "^8.2.0",
-        "css-functions-list": "^3.2.1",
-        "css-tree": "^2.3.1",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.1",
-        "fastest-levenshtein": "^1.0.16",
-        "file-entry-cache": "^7.0.0",
-        "global-modules": "^2.0.0",
-        "globby": "^11.1.0",
-        "globjoin": "^0.1.4",
-        "html-tags": "^3.3.1",
-        "ignore": "^5.2.4",
-        "import-lazy": "^4.0.0",
-        "imurmurhash": "^0.1.4",
-        "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.29.0",
-        "mathml-tag-names": "^2.1.3",
-        "meow": "^10.1.5",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.28",
-        "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-safe-parser": "^6.0.0",
-        "postcss-selector-parser": "^6.0.13",
-        "postcss-value-parser": "^4.2.0",
-        "resolve-from": "^5.0.0",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "style-search": "^0.1.0",
-        "supports-hyperlinks": "^3.0.0",
-        "svg-tags": "^1.0.0",
-        "table": "^6.8.1",
-        "write-file-atomic": "^5.0.1"
-      },
-      "bin": {
-        "stylelint": "bin/stylelint.mjs"
-      },
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/stylelint"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/stylelint-config-recommended": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz",
-      "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==",
-      "dev": true,
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "stylelint": "^15.10.0"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/stylelint-config-recommended-scss": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-13.1.0.tgz",
-      "integrity": "sha512-8L5nDfd+YH6AOoBGKmhH8pLWF1dpfY816JtGMePcBqqSsLU+Ysawx44fQSlMOJ2xTfI9yTGpup5JU77c17w1Ww==",
-      "dev": true,
-      "dependencies": {
-        "postcss-scss": "^4.0.9",
-        "stylelint-config-recommended": "^13.0.0",
-        "stylelint-scss": "^5.3.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3.3",
-        "stylelint": "^15.10.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/stylelint-config-standard": {
-      "version": "34.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz",
-      "integrity": "sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==",
-      "dev": true,
-      "dependencies": {
-        "stylelint-config-recommended": "^13.0.0"
-      },
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0"
-      },
-      "peerDependencies": {
-        "stylelint": "^15.10.0"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/stylelint-config-standard-scss": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-11.1.0.tgz",
-      "integrity": "sha512-5gnBgeNTgRVdchMwiFQPuBOtj9QefYtfXiddrOMJA2pI22zxt6ddI2s+e5Oh7/6QYl7QLJujGnaUR5YyGq72ow==",
-      "dev": true,
-      "dependencies": {
-        "stylelint-config-recommended-scss": "^13.1.0",
-        "stylelint-config-standard": "^34.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.3.3",
-        "stylelint": "^15.10.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/stylelint-scss": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-5.3.2.tgz",
-      "integrity": "sha512-4LzLaayFhFyneJwLo0IUa8knuIvj+zF0vBFueQs4e3tEaAMIQX8q5th8ziKkgOavr6y/y9yoBe+RXN/edwLzsQ==",
-      "dev": true,
-      "dependencies": {
-        "known-css-properties": "^0.29.0",
-        "postcss-media-query-parser": "^0.2.3",
-        "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.0.13",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "peerDependencies": {
-        "stylelint": "^14.5.1 || ^15.0.0"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/trim-newlines": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
-      "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/type-fest": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
-      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@mate-academy/stylelint-config/node_modules/write-file-atomic": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz",
-      "integrity": "sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "stylelint-config-clean-order": "^7.0.0",
+        "stylelint-config-standard-scss": "^14.0.0",
+        "stylelint-scss": "^6.11.1"
       }
     },
     "node_modules/@mirzazeyrek/node-resemble-js": {
@@ -1903,89 +1373,24 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@octokit/auth-token": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-5.1.1.tgz",
-      "integrity": "sha512-rh3G3wDO8J9wSjfI436JUKzHIxq8NaiL0tVeB2aXmG6p/9859aUOAjA9pmSPNGGZxfwmaJ9ozOJImuNVJdpvbA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/core": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-6.1.2.tgz",
-      "integrity": "sha512-hEb7Ma4cGJGEUNOAVmyfdB/3WirWMg5hDuNFVejGEDFqupeOysLc2sG6HJxY2etBp5YQu5Wtxwi020jS9xlUwg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/auth-token": "^5.0.0",
-        "@octokit/graphql": "^8.0.0",
-        "@octokit/request": "^9.0.0",
-        "@octokit/request-error": "^6.0.1",
-        "@octokit/types": "^13.0.0",
-        "before-after-hook": "^3.0.2",
-        "universal-user-agent": "^7.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/endpoint": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-10.1.1.tgz",
-      "integrity": "sha512-JYjh5rMOwXMJyUpj028cu0Gbp7qe/ihxfJMLc8VZBMMqSwLgOxDI1911gV4Enl1QSavAQNJcwmwBF9M0VvLh6Q==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/types": "^13.0.0",
-        "universal-user-agent": "^7.0.2"
-      },
+      "dev": true,
       "engines": {
-        "node": ">= 18"
+        "node": ">= 8"
       }
     },
-    "node_modules/@octokit/graphql": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-8.1.1.tgz",
-      "integrity": "sha512-ukiRmuHTi6ebQx/HFRCXKbDlOh/7xEV6QUXaE7MJEKGNAncGI/STSbOkl12qVXZrfZdpXctx5O9X1AIaebiDBg==",
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
-        "@octokit/request": "^9.0.0",
-        "@octokit/types": "^13.0.0",
-        "universal-user-agent": "^7.0.0"
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">= 8"
       }
     },
-    "node_modules/@octokit/openapi-types": {
-      "version": "22.2.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
-      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/@octokit/plugin-paginate-rest": {
       "version": "2.21.3",
       "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz",
@@ -2041,35 +1446,6 @@
         "@types/node": ">= 8"
       }
     },
-    "node_modules/@octokit/request": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-9.1.3.tgz",
-      "integrity": "sha512-V+TFhu5fdF3K58rs1pGUJIDH5RZLbZm5BI+MNF+6o/ssFNT4vWlCh/tVpF3NxGtP15HUxTTMUbsG5llAuU2CZA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/endpoint": "^10.0.0",
-        "@octokit/request-error": "^6.0.1",
-        "@octokit/types": "^13.1.0",
-        "universal-user-agent": "^7.0.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@octokit/request-error": {
-      "version": "6.1.4",
-      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-6.1.4.tgz",
-      "integrity": "sha512-VpAhIUxwhWZQImo/dWAN/NpPqqojR6PSLgLYAituLM6U+ddx9hCioFGwBr5Mi+oi5CLeJkcAs3gJ0PYYzU6wUg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/types": "^13.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
     "node_modules/@octokit/rest": {
       "version": "17.11.2",
       "resolved": "https://registry.npmjs.org/@octokit/rest/-/rest-17.11.2.tgz",
@@ -2245,16 +1621,6 @@
         "os-name": "^3.1.0"
       }
     },
-    "node_modules/@octokit/types": {
-      "version": "13.5.0",
-      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.5.0.tgz",
-      "integrity": "sha512-HdqWTf5Z3qwDVlzCrP8UJquMwunpDiMPt5er+QjGzL4hqr/vBVY/MauQgS1xWxCDT1oMx1EULyqxncdCY/NVSQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@octokit/openapi-types": "^22.2.0"
-      }
-    },
     "node_modules/@parcel/bundler-default": {
       "version": "2.12.0",
       "resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.12.0.tgz",
@@ -4846,13 +4212,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/before-after-hook": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-3.0.2.tgz",
-      "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -5471,87 +4830,6 @@
         "node": ">=12 || >=16"
       }
     },
-    "node_modules/css-select": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
-      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^6.1.0",
-        "domhandler": "^5.0.2",
-        "domutils": "^3.0.1",
-        "nth-check": "^2.0.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/fb55"
-      }
-    },
-    "node_modules/css-select/node_modules/dom-serializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
-      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.2",
-        "entities": "^4.2.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/css-select/node_modules/domhandler": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
-      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "domelementtype": "^2.3.0"
-      },
-      "engines": {
-        "node": ">= 4"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domhandler?sponsor=1"
-      }
-    },
-    "node_modules/css-select/node_modules/domutils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "dom-serializer": "^2.0.0",
-        "domelementtype": "^2.3.0",
-        "domhandler": "^5.0.3"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
-    "node_modules/css-select/node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/css-tree": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
@@ -5589,45 +4867,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/csso": {
-      "version": "5.0.5",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
-      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "css-tree": "~2.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/css-tree": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
-      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "mdn-data": "2.0.28",
-        "source-map-js": "^1.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
-        "npm": ">=7.0.0"
-      }
-    },
-    "node_modules/csso/node_modules/mdn-data": {
-      "version": "2.0.28",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
-      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
-      "dev": true,
-      "optional": true,
-      "peer": true
-    },
     "node_modules/data-uri-to-buffer": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
@@ -7119,16 +6358,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/import-lazy": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
-      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -9678,10 +8907,11 @@
       "dev": true
     },
     "node_modules/postcss-resolve-nested-selector": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
-      "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
-      "dev": true
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz",
+      "integrity": "sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/postcss-safe-parser": {
       "version": "7.0.0",
@@ -9728,6 +8958,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "engines": {
         "node": ">=12.0"
       },
@@ -9748,6 +8979,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-sorting": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
+      "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.4.20"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -10701,10 +9942,11 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10757,20 +9999,6 @@
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
       "dev": true
     },
-    "node_modules/srcset": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/srcset/-/srcset-5.0.1.tgz",
-      "integrity": "sha512-/P1UYbGfJVlxZag7aABNRrulEXAwCSDo7fklafOQrantuPTDmYgijJMks2zusPCVzgW9+4P69mq7w6pYuZpgxw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -10921,13 +10149,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/style-search": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
-      "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/stylelint": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.7.0.tgz",
@@ -10991,23 +10212,199 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/stylelint-config-clean-order": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-clean-order/-/stylelint-config-clean-order-7.0.0.tgz",
+      "integrity": "sha512-R28w1xNliIbem3o+VIrNjAU8cMgxrGlDoXVqWW7lJ1OvSDsmNGj5aKSW6Xm7i5PK4E99T3Hs19BJFni5IbE56g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-order": "^6.0.4"
+      },
+      "peerDependencies": {
+        "stylelint": ">=14"
+      }
+    },
+    "node_modules/stylelint-config-recommended": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz",
+      "integrity": "sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
+    "node_modules/stylelint-config-recommended-scss": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz",
+      "integrity": "sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-scss": "^4.0.9",
+        "stylelint-config-recommended": "^14.0.1",
+        "stylelint-scss": "^6.4.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^16.6.1"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "36.0.1",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz",
+      "integrity": "sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/stylelint"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/stylelint"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended": "^14.0.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^16.1.0"
+      }
+    },
+    "node_modules/stylelint-config-standard-scss": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-14.0.0.tgz",
+      "integrity": "sha512-6Pa26D9mHyi4LauJ83ls3ELqCglU6VfCXchovbEqQUiEkezvKdv6VgsIoMy58i00c854wVmOw0k8W5FTpuaVqg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "stylelint-config-recommended-scss": "^14.1.0",
+        "stylelint-config-standard": "^36.0.1"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^16.11.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylelint-order": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz",
+      "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss": "^8.4.32",
+        "postcss-sorting": "^8.0.2"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1"
+      }
+    },
     "node_modules/stylelint-scss": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.4.1.tgz",
-      "integrity": "sha512-+clI2bQC2FPOt06ZwUlXZZ95IO2C5bKTP0GLN1LNQPVvISfSNcgMKv/VTwym1mK9vnqhHbOk8lO4rj4nY7L9pw==",
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-6.14.0.tgz",
+      "integrity": "sha512-ZKmHMZolxeuYsnB+PCYrTpFce0/QWX9i9gh0hPXzp73WjuIMqUpzdQaBCrKoLWh6XtCFSaNDErkMPqdjy1/8aA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "known-css-properties": "^0.34.0",
+        "css-tree": "^3.0.1",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.37.0",
+        "mdn-data": "^2.25.0",
         "postcss-media-query-parser": "^0.2.3",
-        "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.1.0",
+        "postcss-resolve-nested-selector": "^0.1.6",
+        "postcss-selector-parser": "^7.1.1",
         "postcss-value-parser": "^4.2.0"
       },
       "engines": {
         "node": ">=18.12.0"
       },
       "peerDependencies": {
-        "stylelint": "^16.0.2"
+        "stylelint": "^16.8.2"
+      }
+    },
+    "node_modules/stylelint-scss/node_modules/css-tree": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.27.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/stylelint-scss/node_modules/css-tree/node_modules/mdn-data": {
+      "version": "2.27.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/stylelint-scss/node_modules/known-css-properties": {
+      "version": "0.37.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.37.0.tgz",
+      "integrity": "sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint-scss/node_modules/mdn-data": {
+      "version": "2.28.1",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.28.1.tgz",
+      "integrity": "sha512-U9w+PzSZ00Z5m9rZ5ARVFL5xOfuCHdKYi/1RRwDCJsboFgJDNT3zT6PIPD7mZQYaQLhsZM3GfDRgSMRHhSmVng==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/stylelint-scss/node_modules/postcss-selector-parser": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+      "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
       }
     },
     "node_modules/stylelint/node_modules/ansi-regex": {
@@ -11176,33 +10573,6 @@
       "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
       "dev": true
     },
-    "node_modules/svgo": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
-      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@trysound/sax": "0.2.0",
-        "commander": "^7.2.0",
-        "css-select": "^5.1.0",
-        "css-tree": "^2.3.1",
-        "css-what": "^6.1.0",
-        "csso": "^5.0.5",
-        "picocolors": "^1.0.0"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/svgo"
-      }
-    },
     "node_modules/table": {
       "version": "6.8.2",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
@@ -11456,13 +10826,6 @@
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
       "dev": true
     },
-    "node_modules/universal-user-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.2.tgz",
-      "integrity": "sha512-0JCqzSKnStlRRQfCdowvqy3cy0Dvtlb8xecj/H8JFZuCze4rwjPZQOgvFvn0Ws/usCHQFGpyr+pB9adaGwXn4Q==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
diff --git a/package.json b/package.json
index 34398805fa..f538e623d5 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "@mate-academy/backstop-config": "latest",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.6",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "backstopjs": "6.3.23",
diff --git a/src/index.html b/src/index.html
index 9cff78eeb7..8c1528ffea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,22 +6,435 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Catalog</title>
+
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
     <link
       rel="preconnect"
       href="https://fonts.gstatic.com"
     />
     <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap"
       rel="stylesheet"
     />
+
+    <title>Catalog</title>
+
     <link
       rel="stylesheet"
-      href="styles/index.scss"
+      href="./styles/index.scss"
     />
   </head>
 
   <body>
-    <h1>Catalog</h1>
+    <header class="header">
+      <a
+        href="#"
+        class="logo"
+      >
+        <img
+          src="./images/logo.png"
+          alt="Moyo logo"
+          class="logo__image"
+        />
+      </a>
+
+      <nav class="nav">
+        <ul class="nav__list">
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link is-active"
+            >
+              Apple
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Samsung
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Smartphones
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+              data-qa="nav-hover"
+            >
+              Laptops & Computers
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Gadgets
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Tablets
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Photo
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Video
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main class="catalog">
+      <div
+        class="card"
+        data-qa="card"
+      >
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+          data-qa="card-hover"
+        >
+          Buy
+        </a>
+      </div>
+      <div class="card">
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+        >
+          Buy
+        </a>
+      </div>
+      <div class="card">
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+        >
+          Buy
+        </a>
+      </div>
+      <div class="card">
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+        >
+          Buy
+        </a>
+      </div>
+      <div class="card">
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+        >
+          Buy
+        </a>
+      </div>
+      <div class="card">
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+        >
+          Buy
+        </a>
+      </div>
+      <div class="card">
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+        >
+          Buy
+        </a>
+      </div>
+      <div class="card">
+        <div class="card__media">
+          <img
+            class="card__img"
+            src="./images/imac.jpeg"
+            alt="APPLE A1419 iMac 27"
+          />
+        </div>
+
+        <div class="card__product-title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </div>
+
+        <div class="card__product-code">Product code: 195434</div>
+
+        <div class="card__review">
+          <ul class="stars stars--4">
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+            <li class="stars__star"></li>
+          </ul>
+
+          <p class="card__review-count">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-title">Price:</p>
+          <p class="card__price-amount">$2,199</p>
+        </div>
+
+        <a
+          href="#"
+          class="card__buy"
+        >
+          Buy
+        </a>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/src/styles/card.scss b/src/styles/card.scss
new file mode 100644
index 0000000000..225571ec08
--- /dev/null
+++ b/src/styles/card.scss
@@ -0,0 +1,123 @@
+.card {
+  box-sizing: border-box;
+  padding: 32px 16px 16px;
+  border: 1px solid #f3f3f3;
+  border-radius: 5px;
+  width: 200px;
+
+  transition: all 300ms;
+
+  &__media {
+    width: 160px;
+    height: 134px;
+    margin-bottom: 40px;
+    margin-inline: 3px;
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__product-title {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 18px;
+
+    margin-bottom: 4px;
+
+    color: $main-text-color;
+
+    transition: all 300ms;
+  }
+
+  &__product-code {
+    font-weight: 400;
+    line-height: 14px;
+    color: $secondary-text-color;
+  }
+
+  &__review {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding-top: 16px;
+    padding-bottom: 24px;
+
+    &-count {
+      font-size: 10px;
+      font-weight: 400;
+      line-height: 14px;
+
+      margin: 0;
+
+      color: $main-text-color;
+    }
+  }
+
+  &__price {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-title {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+
+      margin: 0;
+
+      color: $secondary-text-color;
+    }
+
+    &-amount {
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 18px;
+
+      margin: 0;
+
+      color: $main-text-color;
+    }
+  }
+
+  &__buy {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 166px;
+    height: 40px;
+    margin-top: 16px;
+
+    border: 1px solid $accent-color;
+    background-color: $accent-color;
+    border-radius: 5px;
+    box-sizing: border-box;
+
+    color: #fff;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+
+    text-decoration: none;
+    text-transform: uppercase;
+
+    transition: all 300ms;
+
+    &:hover {
+      border-color: $accent-color;
+      background-color: #fff;
+      color: $accent-color;
+    }
+  }
+
+  &:hover {
+    transform: scale(1.2);
+  }
+
+  &:hover &__product-title {
+    color: $card-product-title-hover-color;
+  }
+}
diff --git a/src/styles/catalog.scss b/src/styles/catalog.scss
new file mode 100644
index 0000000000..d4d48e8379
--- /dev/null
+++ b/src/styles/catalog.scss
@@ -0,0 +1,29 @@
+.catalog {
+  --column-count: 1;
+
+  display: grid;
+  grid-template-columns: repeat(var(--column-count), 200px);
+  gap: 46px 48px;
+  align-items: center;
+  justify-content: center;
+
+  padding: 50px 40px;
+}
+
+@media (min-width: 488px) {
+  .catalog {
+    --column-count: 2;
+  }
+}
+
+@media (min-width: 768px) {
+  .catalog {
+    --column-count: 3;
+  }
+}
+
+@media (min-width: 1024px) {
+  .catalog {
+    --column-count: 4;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 293d3b1f13..7f16717d1e 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,6 @@
-body {
-  margin: 0;
-}
+@import '../utils/variables';
+@import 'page';
+@import 'top-bar';
+@import 'catalog';
+@import 'card';
+@import 'stars';
diff --git a/src/styles/page.scss b/src/styles/page.scss
new file mode 100644
index 0000000000..74eb9c4015
--- /dev/null
+++ b/src/styles/page.scss
@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Roboto, sans-serif;
+  font-size: 10px;
+}
diff --git a/src/styles/stars.scss b/src/styles/stars.scss
new file mode 100644
index 0000000000..acae1b16ad
--- /dev/null
+++ b/src/styles/stars.scss
@@ -0,0 +1,27 @@
+.stars {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &__star {
+    display: block;
+
+    width: 16px;
+    height: 16px;
+
+    background-image: url('../images/star.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  &__star:not(:last-child) {
+    margin-right: 4px;
+  }
+
+  @for $i from 1 through 5 {
+    .stars--#{$i} &__star:nth-child(-n + #{$i}) {
+      background-image: url('../images/star-active.svg');
+    }
+  }
+}
diff --git a/src/styles/top-bar.scss b/src/styles/top-bar.scss
new file mode 100644
index 0000000000..5a8e73a074
--- /dev/null
+++ b/src/styles/top-bar.scss
@@ -0,0 +1,64 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  margin: 0;
+  padding: 0 50px;
+
+  font-family: Roboto, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.logo__image {
+  display: block;
+  width: 40px;
+  height: 40px;
+}
+
+.nav__list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nav__item:not(:first-child) {
+  margin-left: 20px;
+}
+
+.nav__link {
+  display: flex;
+  align-items: center;
+
+  height: 60px;
+
+  color: $main-text-color;
+  text-decoration: none;
+  text-transform: uppercase;
+
+  transition: all 300ms;
+
+  &:hover {
+    color: $accent-color;
+  }
+
+  &.is-active {
+    position: relative;
+    color: $accent-color;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+
+      width: 100%;
+      height: 4px;
+
+      border-radius: 8px;
+      background-color: $accent-color;
+    }
+  }
+}
diff --git a/src/utils/variables.scss b/src/utils/variables.scss
new file mode 100644
index 0000000000..3852fe6e90
--- /dev/null
+++ b/src/utils/variables.scss
@@ -0,0 +1,4 @@
+$main-text-color: #060b35;
+$secondary-text-color: #616070;
+$accent-color: #00acdc;
+$card-product-title-hover-color: #34568b;