diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
new file mode 100644
index 000000000..8b5743ecb
--- /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/README.md b/README.md
index afee6c841..1aae63381 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ Check font styles. Use [Playfair Display](https://fonts.google.com/specimen/Play
 11. `git push origin develop` - to send you code for PR.
 12. Create a Pull Request (PR) from your branch `develop` to branch `master` of original repo.
 13. Replace `<your_account>` with your Github username in the
-  [DEMO LINK](https://<your_account>.github.io/Museum_2/).
+  [DEMO LINK](https://IvanRyabukha.github.io/Museum_2/).
 14. Copy `DEMO LINK` to the PR description.
 
 > To update you PR repeat steps 7-11.
diff --git a/package-lock.json b/package-lock.json
index cb33dce27..a91864a25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@mate-academy/eslint-config": "latest",
         "@mate-academy/jest-mochawesome-reporter": "^1.0.0",
         "@mate-academy/linthtml-config": "latest",
-        "@mate-academy/scripts": "^2.1.1",
+        "@mate-academy/scripts": "^2.1.2",
         "@mate-academy/stylelint-config": "latest",
         "@parcel/transformer-sass": "^2.12.0",
         "cypress": "^13.13.0",
@@ -143,6 +143,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.3.tgz",
       "integrity": "sha512-Jg+msLuNuCJDyBvFv5+OKOUjWMZgd85bKjbICd3zWrKAo+bJ49HJufi7CQE0q0uR8NGyO6xkCACScNqyjHSZew==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.22.13",
@@ -810,6 +811,7 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -832,6 +834,7 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -874,7 +877,6 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
-      "peer": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
       },
@@ -1100,7 +1102,6 @@
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -1118,7 +1119,6 @@
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
       "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1131,7 +1131,6 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -1143,15 +1142,13 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -1169,7 +1166,6 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -1185,7 +1181,6 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -1783,10 +1778,11 @@
       "dev": true
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.1.tgz",
-      "integrity": "sha512-Tf97p/jZ/ZRsQSPGcZf2FpvxgUCl8DiUOsiDFHj7HBN8gMK0iZOBQEtyqcFsauVUAvPP8Ayo8cAiC12MMp45iQ==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz",
+      "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@octokit/rest": "^17.11.2",
         "@types/get-port": "^4.2.0",
@@ -1880,7 +1876,6 @@
           "url": "https://opencollective.com/csstools"
         }
       ],
-      "peer": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
       },
@@ -1893,22 +1888,19 @@
       "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
+      "dev": 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
+      "dev": 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"
       },
@@ -1921,7 +1913,6 @@
       "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",
@@ -1940,7 +1931,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",
@@ -1967,7 +1957,6 @@
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
       "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "mdn-data": "2.0.30",
         "source-map-js": "^1.0.1"
@@ -1981,7 +1970,6 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -1999,7 +1987,6 @@
       "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"
       },
@@ -2012,7 +1999,6 @@
       "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"
       },
@@ -2025,7 +2011,6 @@
       "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"
@@ -2042,7 +2027,6 @@
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
       "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2055,7 +2039,6 @@
       "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"
       },
@@ -2068,7 +2051,6 @@
       "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"
       },
@@ -2083,15 +2065,13 @@
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
       "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "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",
@@ -2118,7 +2098,6 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -2134,7 +2113,6 @@
       "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"
       },
@@ -2150,7 +2128,6 @@
       "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"
       },
@@ -2167,7 +2144,6 @@
       "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"
       },
@@ -2180,7 +2156,6 @@
       "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",
@@ -2199,7 +2174,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
       "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "find-up": "^5.0.0",
         "read-pkg": "^6.0.0",
@@ -2217,7 +2191,6 @@
       "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"
@@ -2234,7 +2207,6 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=14"
       },
@@ -2247,7 +2219,6 @@
       "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"
       },
@@ -2404,7 +2375,6 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
       "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -2417,7 +2387,6 @@
       "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"
       },
@@ -2430,7 +2399,6 @@
       "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"
@@ -2592,7 +2560,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-6.0.0.tgz",
       "integrity": "sha512-P4YJBPdPSpWTQ1NU4XYdvHvXJJDxM6YwpS0FZHRgP7YFkdVxsWcpWGy/NVqlAA7PcPCnMacXlRm1y2PFZRWL/w==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">= 20"
       }
@@ -2621,7 +2588,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-11.0.0.tgz",
       "integrity": "sha512-hoYicJZaqISMAI3JfaDr1qMNi48OctWuOih1m80bkYow/ayPw6Jj52tqWJ6GEoFTk1gBqfanSoI1iY99Z5+ekQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/types": "^14.0.0",
         "universal-user-agent": "^7.0.2"
@@ -2635,7 +2601,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-9.0.1.tgz",
       "integrity": "sha512-j1nQNU1ZxNFx2ZtKmL4sMrs4egy5h65OMDmSbVyuCzjOcwsHq6EaYjOTGXPQxgfiN8dJ4CriYHk6zF050WEULg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/request": "^10.0.2",
         "@octokit/types": "^14.0.0",
@@ -2705,7 +2670,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/request/-/request-10.0.3.tgz",
       "integrity": "sha512-V6jhKokg35vk098iBqp2FBKunk3kMTXlmq+PtbV9Gl3TfskWlebSofU9uunVKhUN7xl+0+i5vt0TGTG8/p/7HA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/endpoint": "^11.0.0",
         "@octokit/request-error": "^7.0.0",
@@ -2722,7 +2686,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-7.0.0.tgz",
       "integrity": "sha512-KRA7VTGdVyJlh0cP5Tf94hTiYVVqmt2f3I6mnimmaVz4UG3gQV/k4mDJlJv3X67iX6rmN7gSHCF8ssqeMnmhZg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/types": "^14.0.0"
       },
@@ -2904,7 +2867,6 @@
       "resolved": "https://registry.npmjs.org/@octokit/types/-/types-14.1.0.tgz",
       "integrity": "sha512-1y6DgTy8Jomcpu33N+p5w58l6xyt55Ar2I91RPiIA0xCJBXyUAhXCcmZaDWSANiha7R9a6qJJ2CRomGPZ6f46g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@octokit/openapi-types": "^25.1.0"
       }
@@ -2913,8 +2875,7 @@
       "version": "25.1.0",
       "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-25.1.0.tgz",
       "integrity": "sha512-idsIggNXUKkk0+BExUn1dQ92sfysJrje03Q0bv0e+KPLrvyqZF8MnBpFz8UNfYDwB3Ie7Z0TByjWfzxt7vseaA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/@parcel/bundler-default": {
       "version": "2.15.4",
@@ -3061,6 +3022,7 @@
       "resolved": "https://registry.npmjs.org/@parcel/core/-/core-2.15.4.tgz",
       "integrity": "sha512-+TXxTm58lFwXXObFAEclwKX1p1AdixcD+M7T4NeFIQzQ4F20Vr+6oybCSqW1exNA3uHqVDDFLx7TT78seVjvkg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@mischnic/json-sourcemap": "^0.1.1",
         "@parcel/cache": "2.15.4",
@@ -4666,7 +4628,6 @@
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -5162,6 +5123,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5722,8 +5684,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-4.0.0.tgz",
       "integrity": "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/bl": {
       "version": "4.1.0",
@@ -5774,8 +5735,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz",
       "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/browserslist": {
       "version": "4.25.0",
@@ -5796,6 +5756,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001718",
         "electron-to-chromium": "^1.5.160",
@@ -7160,8 +7121,7 @@
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
@@ -7211,6 +7171,7 @@
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
       "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "ansi-colors": "^4.1.1",
         "strip-ansi": "^6.0.1"
@@ -7433,6 +7394,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -7560,6 +7522,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz",
       "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "array-includes": "^3.1.7",
         "array.prototype.findlastindex": "^1.2.3",
@@ -7600,6 +7563,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-11.1.0.tgz",
       "integrity": "sha512-oUwtPJ1W0SKD0Tr+wqu92c5xuCeQqB3hSCHasn/ZgjFdA9iDGNkNf2Zi9ztY7X+hNuMib23LNGRm6+uN+KLE3g==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "eslint-plugin-es": "^3.0.0",
         "eslint-utils": "^2.0.0",
@@ -7629,6 +7593,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.3.1.tgz",
       "integrity": "sha512-bY2sGqyptzFBDLh/GMbAxfdJC+b0f23ME63FOE4+Jao0oZ3E1LEwFtWJX/1pGMJLiTtrSSern2CRM/g+dfc0eQ==",
       "dev": true,
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -7652,6 +7617,7 @@
           "url": "https://feross.org/support"
         }
       ],
+      "peer": true,
       "peerDependencies": {
         "eslint": ">=5.0.0"
       }
@@ -8200,8 +8166,7 @@
           "type": "opencollective",
           "url": "https://opencollective.com/fastify"
         }
-      ],
-      "peer": true
+      ]
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
@@ -8346,7 +8311,6 @@
       "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
       "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
       "dev": true,
-      "peer": true,
       "bin": {
         "flat": "cli.js"
       }
@@ -8401,7 +8365,6 @@
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
       "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cross-spawn": "^7.0.6",
         "signal-exit": "^4.0.1"
@@ -8418,7 +8381,6 @@
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -8433,7 +8395,6 @@
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -8443,7 +8404,6 @@
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -8456,7 +8416,6 @@
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -8466,7 +8425,6 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=14"
       },
@@ -8479,7 +8437,6 @@
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -8990,7 +8947,6 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "he": "bin/he"
       }
@@ -9229,7 +9185,6 @@
       "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"
       }
@@ -9814,7 +9769,6 @@
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
       "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -11569,7 +11523,6 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
       "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -11579,7 +11532,6 @@
       "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.7.1.tgz",
       "integrity": "sha512-5EK+Cty6KheMS/YLPPMJC64g5V61gIR25KsRItHw6x4hEKT6Njp1n9LOlH4gpevuwMVS66SXaBBpg+RWZkza4A==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "browser-stdout": "^1.3.1",
         "chokidar": "^4.0.1",
@@ -11614,15 +11566,13 @@
       "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
+      "dev": true
     },
     "node_modules/mocha/node_modules/brace-expansion": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
       "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -11632,7 +11582,6 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -11650,7 +11599,6 @@
       "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
       "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -11660,7 +11608,6 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -11673,7 +11620,6 @@
       "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"
@@ -11690,7 +11636,6 @@
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
       "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^3.1.2",
@@ -11711,7 +11656,6 @@
       "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"
       },
@@ -11724,7 +11668,6 @@
       "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"
       },
@@ -11740,7 +11683,6 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -11756,7 +11698,6 @@
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -11772,7 +11713,6 @@
       "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"
       },
@@ -11788,7 +11728,6 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -11804,7 +11743,6 @@
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
       "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "cliui": "^8.0.1",
         "escalade": "^3.1.1",
@@ -11823,7 +11761,6 @@
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
       "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -12538,8 +12475,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
       "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/parcel": {
       "version": "2.15.4",
@@ -12676,7 +12612,6 @@
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
       "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "lru-cache": "^10.2.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -12692,8 +12627,7 @@
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/path-to-regexp": {
       "version": "1.8.0",
@@ -12798,6 +12732,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -12876,6 +12811,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
       "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -13093,7 +13029,6 @@
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
       "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
@@ -13543,7 +13478,6 @@
       "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
       "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "randombytes": "^2.1.0"
       }
@@ -13884,7 +13818,6 @@
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -13957,7 +13890,6 @@
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -14020,8 +13952,7 @@
       "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
+      "dev": true
     },
     "node_modules/stylelint": {
       "version": "16.21.0",
@@ -14273,6 +14204,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
       "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
       "dev": true,
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -14751,8 +14683,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-7.0.3.tgz",
       "integrity": "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/universalify": {
       "version": "2.0.1",
@@ -15066,8 +14997,7 @@
       "version": "9.3.2",
       "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-9.3.2.tgz",
       "integrity": "sha512-Xz4Nm9c+LiBHhDR5bDLnNzmj6+5F+cyEAWPMkbs2awq/dYazR/efelZzUAjB/y3kNHL+uzkHvxVVpaOfGCPV7A==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/wrap-ansi": {
       "version": "6.2.0",
@@ -15089,7 +15019,6 @@
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -15213,7 +15142,6 @@
       "resolved": "https://registry.npmjs.org/yargs-unparser/-/yargs-unparser-2.0.0.tgz",
       "integrity": "sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "camelcase": "^6.0.0",
         "decamelize": "^4.0.0",
@@ -15229,7 +15157,6 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
       "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -15242,7 +15169,6 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-4.0.0.tgz",
       "integrity": "sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -15255,7 +15181,6 @@
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
       "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
diff --git a/package.json b/package.json
index 55a744c57..53a569adf 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@mate-academy/eslint-config": "latest",
     "@mate-academy/jest-mochawesome-reporter": "^1.0.0",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.1",
+    "@mate-academy/scripts": "^2.1.2",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "cypress": "^13.13.0",
diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/images/.gitkeep b/src/images/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/images/icon/arrow.svg b/src/images/icon/arrow.svg
new file mode 100644
index 000000000..43f997158
--- /dev/null
+++ b/src/images/icon/arrow.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33337 10H16.6667" stroke="#1C1B29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.8334 4.1665L16.6667 9.99984L10.8334 15.8332" stroke="#1C1B29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/images/icon/cross.svg b/src/images/icon/cross.svg
new file mode 100644
index 000000000..97c11e4ad
--- /dev/null
+++ b/src/images/icon/cross.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4.41846" y="24.5718" width="29.0926" height="2.01976" transform="rotate(-45 4.41846 24.5718)" fill="#1C1B29"/>
+<rect x="5.42822" y="4" width="29.0926" height="2.01976" transform="rotate(45 5.42822 4)" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/icon/dropdown.svg b/src/images/icon/dropdown.svg
new file mode 100644
index 000000000..0e01947fd
--- /dev/null
+++ b/src/images/icon/dropdown.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.79691 3.08149C1.68826 2.97284 1.51209 2.97284 1.40343 3.08149L1.08149 3.40343C0.972836 3.51209 0.972836 3.68826 1.08149 3.79691L4.44592 7.16134C4.45639 7.17751 4.46872 7.19284 4.4829 7.20702L4.80484 7.52896C4.9135 7.63761 5.08966 7.63761 5.19832 7.52896L8.91851 3.80877C9.02716 3.70011 9.02716 3.52394 8.91851 3.41529L8.59657 3.09335C8.48791 2.98469 8.31174 2.98469 8.20309 3.09335L5.00593 6.29051L1.79691 3.08149Z" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/icon/facebook.svg b/src/images/icon/facebook.svg
new file mode 100644
index 000000000..6c0bad825
--- /dev/null
+++ b/src/images/icon/facebook.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.90909 10.9434V20H11.5455V10.9434H14.2727L15 7.16981H11.5455V4.5283C11.5455 3.96226 12.0909 3.39623 12.6364 3.39623H15V0H10.8182C9.90909 0 7.90909 1.32075 7.90909 3.39623V7.16981H5V10.9434H7.90909Z" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/icon/instagram.svg b/src/images/icon/instagram.svg
new file mode 100644
index 000000000..5af50bb18
--- /dev/null
+++ b/src/images/icon/instagram.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 14.2442V3.56977C1 2.38372 2.38372 1 3.76744 1H15.2326C16.814 1 18 2.5814 18 4.36047V15.0349C18 16.2209 17.0116 18 14.8372 18H4.95349C2.77907 18 1 16.4186 1 14.2442ZM9.50003 6.54189C7.8663 6.54189 6.54189 7.8663 6.54189 9.50003C6.54189 11.1338 7.8663 12.4582 9.50003 12.4582C11.1338 12.4582 12.4582 11.1338 12.4582 9.50003C12.4582 7.8663 11.1338 6.54189 9.50003 6.54189ZM5.34189 9.50003C5.34189 7.20356 7.20356 5.34189 9.50003 5.34189C11.7965 5.34189 13.6582 7.20356 13.6582 9.50003C13.6582 11.7965 11.7965 13.6582 9.50003 13.6582C7.20356 13.6582 5.34189 11.7965 5.34189 9.50003ZM14.0466 5.5465C14.5924 5.5465 15.035 5.10399 15.035 4.55813C15.035 4.01226 14.5924 3.56976 14.0466 3.56976C13.5007 3.56976 13.0582 4.01226 13.0582 4.55813C13.0582 5.10399 13.5007 5.5465 14.0466 5.5465Z" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/icon/logo.svg b/src/images/icon/logo.svg
new file mode 100644
index 000000000..8b9dc25ef
--- /dev/null
+++ b/src/images/icon/logo.svg
@@ -0,0 +1,6 @@
+<svg width="124" height="37" viewBox="0 0 124 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.96 6.216V26.16L7.66799 6.216H3.23999V31.416H6.83999V10.932L21.6 31.416H25.56V6.216H21.96Z" fill="#1C1B29"/>
+<path d="M51.977 6.216V11.004C49.889 8.088 46.649 6 42.941 6C35.669 6 30.413 11.4 30.413 18.816C30.413 26.232 35.669 31.632 42.941 31.632C46.649 31.632 49.889 29.544 51.977 26.628V31.416H55.469V6.216H51.977ZM43.085 28.32C37.937 28.32 34.193 24.324 34.193 18.816C34.193 13.308 37.937 9.312 43.085 9.312C48.233 9.312 51.977 13.308 51.977 18.816C51.977 24.324 48.233 28.32 43.085 28.32Z" fill="#1C1B29"/>
+<path d="M91.8309 6.216H86.6829L76.9629 27.168L67.2069 6.216H61.9509V31.416H65.5509V10.896L75.0549 31.416H78.6549L88.2309 10.716V31.416H91.8309V6.216Z" fill="#1C1B29"/>
+<path d="M108.922 31.776C115.186 31.776 119.902 27.204 119.902 21.12V6.216H116.302V21.12C116.302 25.224 113.134 28.32 108.922 28.32C104.71 28.32 101.542 25.224 101.542 21.12V6.216H97.9425V21.12C97.9425 27.204 102.658 31.776 108.922 31.776Z" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/icon/menu.svg b/src/images/icon/menu.svg
new file mode 100644
index 000000000..bc5d4069d
--- /dev/null
+++ b/src/images/icon/menu.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="5" width="25" height="2" fill="#1C1B29"/>
+<rect x="3" y="14" width="25" height="2" fill="#1C1B29"/>
+<rect x="3" y="23" width="25" height="2" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/icon/scroll up.svg b/src/images/icon/scroll up.svg
new file mode 100644
index 000000000..c49ca0cbe
--- /dev/null
+++ b/src/images/icon/scroll up.svg	
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0001 24.9995V4.99952" stroke="#1C1B29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.25012 13.7495L15.0001 4.99952L23.7501 13.7495" stroke="#1C1B29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/images/icon/telegram.svg b/src/images/icon/telegram.svg
new file mode 100644
index 000000000..a4369c774
--- /dev/null
+++ b/src/images/icon/telegram.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.62887 17.4639L10.9278 14.2887L16.4948 19.0515L20 0L0 8.16495L5.56701 10.8866L7.62887 17.4639ZM8.0412 15.6495V12.0207L16.4948 3.85572L6.18553 10.433L8.0412 16.1031V15.6495Z" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/icon/twitter.svg b/src/images/icon/twitter.svg
new file mode 100644
index 000000000..a180591c8
--- /dev/null
+++ b/src/images/icon/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.78947 15.9669C2.94737 16.4548 0.912281 16.4412 0 16.3734C0.421053 16.78 3.57895 18 6.52632 18C9.47368 18 11.5789 17.5934 15.1579 14.3408C18.0211 11.7387 18.3158 7.971 18.1053 6.41244L20 4.37953H18.3158L19.3684 2.34663C18.5965 2.82095 17.0105 3.64763 16.8421 3.15973C16.6316 2.54986 13.6842 1.12682 11.1579 2.75314C9.13684 4.0542 9.47368 5.80257 9.68421 7.22553C5.89474 6.81902 1.05263 2.75314 1.05263 2.75314C-0.122503 4.86053 1.46337 7.41233 2.09911 8.43529L2.10526 8.4452L0.631579 8.03862C0.631579 9.82757 2.31579 11.0881 3.15789 11.6978H1.89474C2.56842 13.4867 4.70175 14.4761 5.68421 14.7471C5.40351 14.9504 4.63158 15.479 3.78947 15.9669Z" fill="#1C1B29"/>
+</svg>
diff --git a/src/images/img_01.png b/src/images/img_01.png
new file mode 100644
index 000000000..66478e472
Binary files /dev/null and b/src/images/img_01.png differ
diff --git a/src/images/img_02.png b/src/images/img_02.png
new file mode 100644
index 000000000..2ac2781db
Binary files /dev/null and b/src/images/img_02.png differ
diff --git a/src/images/img_03.png b/src/images/img_03.png
new file mode 100644
index 000000000..e314ecf0e
Binary files /dev/null and b/src/images/img_03.png differ
diff --git a/src/images/img_05.png b/src/images/img_05.png
new file mode 100644
index 000000000..960875c33
Binary files /dev/null and b/src/images/img_05.png differ
diff --git a/src/images/img_06.png b/src/images/img_06.png
new file mode 100644
index 000000000..4486cae41
Binary files /dev/null and b/src/images/img_06.png differ
diff --git a/src/images/img_07.png b/src/images/img_07.png
new file mode 100644
index 000000000..2b22c084d
Binary files /dev/null and b/src/images/img_07.png differ
diff --git a/src/images/img_08.png b/src/images/img_08.png
new file mode 100644
index 000000000..ea486141e
Binary files /dev/null and b/src/images/img_08.png differ
diff --git a/src/images/img_09.png b/src/images/img_09.png
new file mode 100644
index 000000000..28fb56703
Binary files /dev/null and b/src/images/img_09.png differ
diff --git a/src/images/img_menu.png b/src/images/img_menu.png
new file mode 100644
index 000000000..00a3f9df5
Binary files /dev/null and b/src/images/img_menu.png differ
diff --git a/src/index.html b/src/index.html
index 8019b83ec..cea9c6bda 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,14 +6,614 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Title</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/src//images/icon/logo.svg"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Raleway:wght@100..900&display=swap"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
-      href="./styles/main.scss"
+      href="/src/styles/index.scss"
     />
+    <title>Museum</title>
   </head>
   <body>
-    <h1>Hello Mate Academy</h1>
-    <script src="scripts/main.js"></script>
+    <header
+      class="header"
+      id="#"
+    >
+      <div class="header__inner container">
+        <a
+          class="header__logo"
+          href="#"
+        >
+          <img
+            src="/src/images/icon/logo.svg"
+            alt="Logo"
+          />
+        </a>
+
+        <div class="header__control">
+          <button
+            class="header__burger"
+            type="button"
+          >
+            <img
+              src="/src/images/icon/menu.svg"
+              alt="Burger button"
+            />
+          </button>
+
+          <div class="header__dropdown-wrapper">
+            <select
+              class="header__dropdown"
+              name="lang"
+            >
+              <option class="header__dropdown-option">UA</option>
+              <option class="header__dropdown-option">EN</option>
+            </select>
+
+            <img
+              src="/src/images/icon/dropdown.svg"
+              alt="Arrow down"
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <main>
+      <section
+        class="hero"
+        id="hero"
+      >
+        <div class="hero__inner container">
+          <div class="hero__info">
+            <p class="hero__description">10 серпня - 10 листопада</p>
+            <h1 class="hero__title">Мистецтво ХІХ - ХХ ст.</h1>
+            <p class="hero__subtitle">
+              Внесок українських митців у світову культуру 19-20 ст.
+            </p>
+            <button class="hero__buyticket">Купити квиток</button>
+            <div class="hero__date">
+              <p class="hero__duration">10.08 - 10.10</p>
+              <div class="hero__divider"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="hero__image">
+          <img
+            src="/src/images/img_01.png"
+            alt="Painting of a woman"
+          />
+        </div>
+      </section>
+
+      <section
+        class="exibitions"
+        id="exibitions"
+      >
+        <div class="exibitions__inner container">
+          <h2 class="exibitions__title">Актуальні виставки</h2>
+          <div class="exibitions__list">
+            <article class="exibitions__exibition">
+              <img
+                src="/src/images/img_03.png"
+                alt="Angel"
+              />
+              <p class="exibitions__exibition-date">11.07 - 22.09</p>
+              <h3 class="exibitions__exibition-title">
+                Кураторська виставка “Ангели”
+              </h3>
+              <p class="exibitions__exibition-description">
+                Виставковий проект «Ангели» – знакова подія для української
+                культури і водночас наймасштабніший...
+              </p>
+              <button class="exibitions__exibition-buy">Купити квиток</button>
+            </article>
+
+            <article class="exibitions__exibition">
+              <img
+                src="/src/images/img_02.png"
+                alt="Art"
+              />
+              <p class="exibitions__exibition-date">Діє постійно</p>
+              <h3 class="exibitions__exibition-title">
+                Мистецтво ХХ ст. — XXI ст.
+              </h3>
+              <p class="exibitions__exibition-description">
+                Знакові роботи Алли Горської, Миколи Самокиша, Федора
+                Кричевського та інших митців.
+              </p>
+              <button class="exibitions__exibition-buy">Купити квиток</button>
+            </article>
+          </div>
+
+          <button class="exibitions__archive">
+            Архів виставок
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.33337 10H16.6667"
+                stroke="#1C1B29"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.8334 4.1665L16.6667 9.99984L10.8334 15.8332"
+                stroke="#1C1B29"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </section>
+
+      <section
+        class="events"
+        id="events"
+      >
+        <div class="events__inner container">
+          <h2 class="events__title">Найближчі події</h2>
+          <article class="events__event-card">
+            <img
+              src="/src/images/img_05.png"
+              alt="Photo of a man"
+            />
+            <div class="events__event-card-info">
+              <p class="events__event-date">14.08 о 13:00</p>
+              <h3 class="events__event-title">
+                Кураторські екскурсії від Павла Гудімова
+              </h3>
+              <p class="events__event-description">
+                Таємниці підготовки, історії експонатів, магія дійства до і в
+                момент вашої присутності – розгортатиметься...
+              </p>
+              <button class="events__event-register">Зареєструватись</button>
+            </div>
+          </article>
+
+          <article class="events__event-card">
+            <img
+              src="/src/images/img_06.png"
+              alt="Photo of a woman"
+            />
+            <div class="events__event-card-info">
+              <p class="events__event-date">16.08 о 13:00</p>
+              <h3 class="events__event-title">
+                Майстер-клас “Подорож до Австралії”
+              </h3>
+              <p class="events__event-description">
+                Цієї неділі о 14:00 на арт-мандрівників чекає останній пункт
+                кругосвітньої подорожі - Австралія.
+              </p>
+              <button class="events__event-register">Зареєструватись</button>
+            </div>
+          </article>
+
+          <button class="events__calendar">
+            Календар подій
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.33337 10H16.6667"
+                stroke="#1C1B29"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.8334 4.1665L16.6667 9.99984L10.8334 15.8332"
+                stroke="#1C1B29"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </section>
+
+      <section
+        class="visit"
+        id="visit"
+      >
+        <div class="visit__inner container">
+          <h2 class="visit__title">Сплануйте візит до музею</h2>
+          <p class="visit__description">
+            Оберіть зручний день, зареєструйтесь на події, що цікавлять, купіть
+            квиток заздалегідь, щоб ніщо не завадило вам насолоджуватись
+            мистецтвом.
+          </p>
+          <button class="visit__btnstart">Почати</button>
+          <div class="visit__image">
+            <img
+              src="/src/images/img_07.png"
+              alt="Picure Art"
+            />
+          </div>
+        </div>
+      </section>
+
+      <section
+        class="news"
+        id="news"
+      >
+        <div class="news__inner container">
+          <h2 class="news__title">Новини</h2>
+          <article class="news__card">
+            <img
+              src="/src/images/img_08.png"
+              alt="Winner"
+            />
+            <p class="news__date">9 серпня 2019</p>
+            <h3 class="news__news-title">Оголошення переможця</h3>
+            <p class="news__description">
+              Друзі, сьогодні п'ятниця! А це означає, що час оголосити переможця
+              розіграшу...
+            </p>
+          </article>
+          <article class="news__card">
+            <img
+              src="/src/images/img_09.png"
+              alt="Cats art"
+            />
+            <p class="news__date">9 серпня 2019</p>
+            <h3 class="news__news-title">Міжнародний день котів</h3>
+            <p class="news__description">
+              Музей з левами не може просто так взяти і пропустити Міжнародний
+              день котів!
+            </p>
+          </article>
+
+          <button class="news__bntall">
+            Усі новини
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.33337 10H16.6667"
+                stroke="#1C1B29"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M10.8334 4.1665L16.6667 9.99984L10.8334 15.8332"
+                stroke="#1C1B29"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </section>
+
+      <section
+        class="subscribe"
+        id="subscribe"
+      >
+        <div class="subscribe__inner container">
+          <h2 class="subscribe__title">Підпишіться на дайджест</h2>
+          <p class="subscribe__description">
+            Першими дізнавайтесь про новини музею та розіграші, отримуйте
+            запрошення на події та читайте статті від кураторів
+          </p>
+          <form class="subscribe__form">
+            <input
+              type="email"
+              id="subscribe-input"
+              class="subscribe__input"
+              placeholder="e-mail"
+              required
+            />
+            <button
+              class="subscribe__btn"
+              type="submit"
+            >
+              Підписатись
+            </button>
+          </form>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <div class="footer__inner container">
+        <div class="footer__contacts">
+          <h2 class="footer__contacts-title">Контакти</h2>
+          <address class="footer__contacts-addr">
+            <a
+              href="https://www.google.com/maps/place/%D1%83%D0%BB.+%D0%9C%D0%B8%D1%85%D0%B0%D0%B8%D0%BB%D0%B0+%D0%93%D1%80%D1%83%D1%88%D0%B5%D0%B2%D1%81%D0%BA%D0%BE%D0%B3%D0%BE,+6,+%D0%9A%D0%B8%D0%B5%D0%B2,+02000/@50.4493882,30.5280583,17z/data=!4m6!3m5!1s0x40d4ce52445a8315:0x5e30ef474eddac89!8m2!3d50.449395!4d30.5307834!16s%2Fg%2F11l76wtstx?entry=ttu&g_ep=EgoyMDI1MTAyOS4yIKXMDSoASAFQAw%3D%3D"
+            >
+              Київ,
+              <br />
+              вул. М. Грушевського, 6
+            </a>
+            <a href="tel:2781357">тел. 278-13-57, 278-74-54</a>
+            <a href="mailto:info@namu.kiev.ua">info@namu.kiev.ua</a>
+          </address>
+
+          <ul class="footer__contacts-soc1als">
+            <li class="footer__contacts-soc1als-item">
+              <a
+                class="footer__contacts-soc1als-link"
+                target="_blank"
+                href="https://www.facebook.com/"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M7.90909 10.9434V20H11.5455V10.9434H14.2727L15 7.16981H11.5455V4.5283C11.5455 3.96226 12.0909 3.39623 12.6364 3.39623H15V0H10.8182C9.90909 0 7.90909 1.32075 7.90909 3.39623V7.16981H5V10.9434H7.90909Z"
+                    fill="#1C1B29"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li class="footer__contacts-soc1als-item">
+              <a
+                class="footer__contacts-soc1als-link"
+                target="_blank"
+                href="https://x.com/"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3.78947 15.9669C2.94737 16.4548 0.912281 16.4412 0 16.3734C0.421053 16.78 3.57895 18 6.52632 18C9.47368 18 11.5789 17.5934 15.1579 14.3408C18.0211 11.7387 18.3158 7.971 18.1053 6.41244L20 4.37953H18.3158L19.3684 2.34663C18.5965 2.82095 17.0105 3.64763 16.8421 3.15973C16.6316 2.54986 13.6842 1.12682 11.1579 2.75314C9.13684 4.0542 9.47368 5.80257 9.68421 7.22553C5.89474 6.81902 1.05263 2.75314 1.05263 2.75314C-0.122503 4.86053 1.46337 7.41233 2.09911 8.43529L2.10526 8.4452L0.631579 8.03862C0.631579 9.82757 2.31579 11.0881 3.15789 11.6978H1.89474C2.56842 13.4867 4.70175 14.4761 5.68421 14.7471C5.40351 14.9504 4.63158 15.479 3.78947 15.9669Z"
+                    fill="#1C1B29"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li class="footer__contacts-soc1als-item">
+              <a
+                class="footer__contacts-soc1als-link"
+                target="_blank"
+                href="https://telegram.org/"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M7.62887 17.4639L10.9278 14.2887L16.4948 19.0515L20 0L0 8.16495L5.56701 10.8866L7.62887 17.4639ZM8.0412 15.6495V12.0207L16.4948 3.85572L6.18553 10.433L8.0412 16.1031V15.6495Z"
+                    fill="#1C1B29"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li class="footer__contacts-soc1als-item">
+              <a
+                class="footer__contacts-soc1als-link"
+                target="_blank"
+                href="https://www.instagram.com/"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M1 14.2442V3.56977C1 2.38372 2.38372 1 3.76744 1H15.2326C16.814 1 18 2.5814 18 4.36047V15.0349C18 16.2209 17.0116 18 14.8372 18H4.95349C2.77907 18 1 16.4186 1 14.2442ZM9.50003 6.54189C7.8663 6.54189 6.54189 7.8663 6.54189 9.50003C6.54189 11.1338 7.8663 12.4582 9.50003 12.4582C11.1338 12.4582 12.4582 11.1338 12.4582 9.50003C12.4582 7.8663 11.1338 6.54189 9.50003 6.54189ZM5.34189 9.50003C5.34189 7.20356 7.20356 5.34189 9.50003 5.34189C11.7965 5.34189 13.6582 7.20356 13.6582 9.50003C13.6582 11.7965 11.7965 13.6582 9.50003 13.6582C7.20356 13.6582 5.34189 11.7965 5.34189 9.50003ZM14.0466 5.5465C14.5924 5.5465 15.035 5.10399 15.035 4.55813C15.035 4.01226 14.5924 3.56976 14.0466 3.56976C13.5007 3.56976 13.0582 4.01226 13.0582 4.55813C13.0582 5.10399 13.5007 5.5465 14.0466 5.5465Z"
+                    fill="#1C1B29"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div class="footer__schedule">
+          <h2 class="footer__schedule-title">Розклад роботи</h2>
+          <ul class="footer__schedule-list">
+            <li>ПН: вихідний</li>
+            <li>ВТ: вихідний</li>
+            <li>СР: 10:00 - 17:00</li>
+            <li>ЧТ: 10:00 - 17:00</li>
+            <li>ПТ: 12:00 - 19:00</li>
+            <li>СБ: 11:00 - 18:00</li>
+            <li>НД: 10:00 - 17:00</li>
+          </ul>
+        </div>
+
+        <nav class="footer__navigation">
+          <h2 class="footer__navigation-title">Головна</h2>
+          <ul class="footer__navigation-list">
+            <li>
+              <a href="#exibitions">Виставки</a>
+            </li>
+            <li>
+              <a href="#events">Події</a>
+            </li>
+            <li>
+              <a href="#news">Новини</a>
+            </li>
+          </ul>
+        </nav>
+
+        <div class="footer__policy">
+          <p class="footer__policy-copyright">© 2010 — 2020</p>
+          <a
+            class="footer__policy-link"
+            href="#"
+          >
+            Privacy — Terms
+          </a>
+          <a
+            href="#"
+            class="footer__policy-arrow-up"
+          >
+            <img
+              src="/src/images/icon/scroll up.svg"
+              alt="Arrow up"
+            />
+          </a>
+        </div>
+      </div>
+    </footer>
+
+    <dialog
+      class="nav-menu"
+      id="navMenu"
+    >
+      <div class="nav-menu__top-bar container">
+        <a
+          class="nav-menu__logo"
+          href="#"
+        >
+          <img
+            src="/src/images/icon/logo.svg"
+            alt="Logo"
+          />
+        </a>
+
+        <div class="nav-menu__control">
+          <div class="nav-menu__dropdown-wrapper">
+            <select
+              class="nav-menu__dropdown"
+              name="lang"
+            >
+              <option class="nav-menu__dropdown-option">UA</option>
+              <option class="nav-menu__dropdown-option">EN</option>
+            </select>
+
+            <img
+              src="/src/images/icon/dropdown.svg"
+              alt="Arrow down"
+            />
+          </div>
+
+          <button class="nav-menu__close">
+            <img
+              src="/src/images/icon/cross.svg"
+              alt="Close button"
+            />
+          </button>
+        </div>
+      </div>
+
+      <div class="nav-menu__body container">
+        <div class="nav-menu__body-schedule">
+          <p class="nav-menu__body-schedule-today">Розклад сьогодні:</p>
+          <p class="nav-menu__body-schedule-time">12:00 - 19:00</p>
+        </div>
+        <div class="nav-menu__body-address">
+          <p class="nav-menu__body-title">Адреса:</p>
+          <p class="nav-menu__body-addr">Київ, вул. М. Грушевського, 6</p>
+        </div>
+        <nav class="nav-menu__body-nav">
+          <ul class="nav-menu__body-nav-list">
+            <li class="nav-menu__body-nav-item">
+              <a
+                href="#exibitions"
+                class="nav-menu__body-nav-link"
+              >
+                Актуальні виставки
+              </a>
+            </li>
+            <li class="nav-menu__body-nav-item">
+              <a
+                href="#events"
+                class="nav-menu__body-nav-link"
+              >
+                Найближчі події
+              </a>
+            </li>
+            <li class="nav-menu__body-nav-item">
+              <a
+                href="#news"
+                class="nav-menu__body-nav-link"
+              >
+                Новини
+              </a>
+            </li>
+          </ul>
+        </nav>
+
+        <span class="nav-menu__divider"></span>
+
+        <button
+          class="nav-menu__buyticket"
+          type="button"
+        >
+          Купити квиток
+        </button>
+        <div class="nav-menu__body-image">
+          <img
+            src="./images/img_menu.png"
+            alt="Boy"
+          />
+        </div>
+      </div>
+    </dialog>
+
+    <script
+      src="/src/scripts/main.js"
+      defer
+    ></script>
   </body>
 </html>
diff --git a/src/scripts/lib/.gitkeep b/src/scripts/lib/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/scripts/main.js b/src/scripts/main.js
index ad9a93a7c..8a9271f96 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1 +1,57 @@
 'use strict';
+
+const dialog = document.getElementById('navMenu');
+const links = document.querySelectorAll('.nav-menu__body-nav-link');
+
+links.forEach((link) => {
+  link.addEventListener('click', () => {
+    if (dialog.open) {
+      dialog.close();
+    }
+  });
+});
+
+const navMenu = document.getElementById('navMenu');
+const openBtn = document.querySelector('.header__burger');
+const closeBtn = navMenu.querySelector('.nav-menu__close');
+
+openBtn.addEventListener('click', () => {
+  navMenu.showModal();
+
+  // eslint-disable-next-line no-undef
+  requestAnimationFrame(() => {
+    navMenu.classList.add('nav-menu--open');
+  });
+});
+
+function closingMenu() {
+  navMenu.classList.remove('nav-menu--open');
+  navMenu.classList.add('nav-menu--closing');
+
+  setTimeout(() => {
+    navMenu.classList.remove('nav-menu--closing');
+    navMenu.close();
+  }, 300);
+}
+
+const closeMenu = () => {
+  closingMenu();
+};
+
+closeBtn.addEventListener('click', closeMenu);
+
+document.querySelector('body').addEventListener('click', (event) => {
+  if (event.target === navMenu) {
+    closingMenu();
+  }
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.querySelector('.subscribe__form');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    form.reset();
+  });
+});
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
deleted file mode 100644
index 33c3ed2b3..000000000
--- a/src/styles/_fonts.scss
+++ /dev/null
@@ -1 +0,0 @@
-// put fonts here
diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss
new file mode 100644
index 000000000..b2daeef33
--- /dev/null
+++ b/src/styles/_globals.scss
@@ -0,0 +1,36 @@
+body {
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  line-height: 150%;
+  cursor: default;
+
+  color: var(--color-gray);
+  background-color: var(--color-white);
+
+  scroll-behavior: smooth;
+}
+
+a,
+button,
+input,
+textarea,
+svg * {
+  transition-duration: var(--transition-duration);
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+body:has(dialog[open]) {
+  overflow: hidden;
+
+  @include desktop {
+    overflow-y: scroll;
+  }
+
+  height: 100vh;
+}
diff --git a/src/styles/_media.scss b/src/styles/_media.scss
new file mode 100644
index 000000000..8556b3651
--- /dev/null
+++ b/src/styles/_media.scss
@@ -0,0 +1,28 @@
+$tablet: 768px;
+$desktop: 1280px;
+
+@mixin tablet {
+  @media (min-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: $desktop) {
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+
+  @media (hover: none) {
+    &:active {
+      @content;
+    }
+  }
+}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
new file mode 100644
index 000000000..9bbeb80ae
--- /dev/null
+++ b/src/styles/_mixins.scss
@@ -0,0 +1,69 @@
+@mixin reset-link {
+  color: inherit;
+
+  &,
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+@mixin reset-button {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+
+@mixin flex-center($isInline: false) {
+  @if $isInline {
+    display: inline-flex;
+  } @else {
+    display: flex;
+  }
+
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin abs-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+}
+
+@mixin square($size) {
+  width: $size;
+  aspect-ratio: 1;
+}
+
+@mixin visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  border: 0 !important;
+  padding: 0 !important;
+  white-space: nowrap !important;
+  clip-path: inset(100%) !important;
+  clip: rect(0 0 0 0) !important;
+  overflow: hidden !important;
+}
+
+@mixin content-padding-inline() {
+  width: 100%;
+  max-width: 1170px;
+  margin-inline: auto;
+  padding-inline: 20px;
+
+  @include tablet {
+    padding-inline: 40px;
+  }
+
+  @include desktop {
+    padding-inline: 0;
+  }
+}
+
+.container {
+  @include content-padding-inline;
+}
diff --git a/src/styles/_normalize.scss b/src/styles/_normalize.scss
new file mode 100644
index 000000000..02eba9e1e
--- /dev/null
+++ b/src/styles/_normalize.scss
@@ -0,0 +1,112 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:where(ul, ol):where([class]) {
+  padding-left: 0;
+}
+
+body,
+:where(blockquote, figure):where([class]) {
+  margin: 0;
+}
+
+:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
+  margin-block: 0;
+}
+
+:where(dd[class]) {
+  margin-left: 0;
+}
+
+:where(fieldset[class]) {
+  margin-left: 0;
+  padding: 0;
+  border: none;
+}
+
+:where(ul[class]) {
+  list-style: none;
+}
+
+:where(address[class]) {
+  font-style: normal;
+}
+
+p {
+  --paragraph-margin-bottom: 24px;
+
+  margin-block: 0;
+}
+
+p:where(:not([class])):not(:last-child) {
+  margin-bottom: var(--paragraph-margin-bottom);
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+input,
+textarea,
+select,
+button {
+  font: inherit;
+}
+
+html {
+  height: 100%;
+  scrollbar-gutter: stable;
+}
+
+html,
+:has(:target) {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100%;
+  line-height: 1.5;
+}
+
+a:where([class]) {
+  display: inline-flex;
+}
+
+button,
+label {
+  cursor: pointer;
+}
+
+:where([fill]:not([fill='none'], [fill^='url'])) {
+  fill: currentColor;
+}
+
+:where([stroke]:not([stroke='none'], [stroke^='url'])) {
+  stroke: currentColor;
+}
+
+svg * {
+  transition-property: fill, stroke;
+}
+
+:where(table) {
+  border-collapse: collapse;
+  border-color: currentColor;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
deleted file mode 100644
index 1837eb46e..000000000
--- a/src/styles/_typography.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-h1 {
-  @extend %h1;
-}
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
deleted file mode 100644
index 3280c3fe1..000000000
--- a/src/styles/_utils.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'utils/vars';
-@import 'utils/mixins';
-@import 'utils/extends';
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
new file mode 100644
index 000000000..d22438e40
--- /dev/null
+++ b/src/styles/_variables.scss
@@ -0,0 +1,18 @@
+:root {
+  --color-main: #cd4d31;
+  --color-white: #f1f5f4;
+  --color-bg: #3f5252;
+  --color-black: #1c1b29;
+  --color-gray: #504f5e;
+  --font-family: 'Raleway', sans-serif;
+  --second-family: 'Playfair Display', serif;
+  --button-primary: var(--color-main);
+  --button-primary-hover: #af3419;
+  --button-primary-pressed: #ea340d;
+  --button-primary-disabled: #dd836f;
+  --button-secondary: var(--color-main);
+  --button-secondary-hover: #af3419;
+  --button-secondary-pressed: #ea340d;
+  --button-secondary-disabled: #dd836f;
+  --transition-duration: 0.3s;
+}
diff --git a/src/styles/blocks/_events.scss b/src/styles/blocks/_events.scss
new file mode 100644
index 000000000..669bb8bc5
--- /dev/null
+++ b/src/styles/blocks/_events.scss
@@ -0,0 +1,223 @@
+.events {
+  margin-top: 120px;
+
+  @include tablet {
+    margin-top: 160px;
+  }
+
+  @include desktop {
+    margin-top: 200px;
+  }
+
+  &__inner {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+
+    @include tablet {
+      grid-template-columns: repeat(6, 1fr);
+      gap: 70px 30px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+      row-gap: 65px;
+    }
+  }
+
+  &__title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 125%;
+    color: var(--color-black);
+
+    grid-column: 1 / -1;
+
+    @include tablet {
+      font-size: 40px;
+      grid-column: 1 / 5;
+    }
+
+    @include desktop {
+      font-size: 48px;
+      line-height: 120%;
+      grid-column: 1 / 7;
+    }
+  }
+
+  &__event-card {
+    margin-top: 60px;
+
+    img {
+      width: 280px;
+      height: 356px;
+      object-fit: cover;
+      margin-bottom: 20px;
+      transition: transform var(--transition-duration) ease-in-out;
+
+      @include tablet {
+        width: 330px;
+        height: 420px;
+        margin-bottom: 0;
+        grid-column: 1 / 4;
+      }
+
+      @include desktop {
+        width: 570px;
+        height: 484px;
+        grid-column: 1 / 5;
+      }
+
+      @include hover {
+        transform: translateY(-20px);
+      }
+    }
+
+    &:first-of-type {
+      grid-column: 1 / -1;
+    }
+
+    &:last-of-type {
+      grid-column: 1 / -1;
+    }
+
+    @include tablet {
+      display: contents;
+      margin-top: 0;
+    }
+  }
+
+  &__event-card-info {
+    grid-column: 4 / 7;
+
+    @include desktop {
+      grid-column: 5 / 11;
+    }
+  }
+
+  &__event-date {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-main);
+    margin-bottom: 10px;
+  }
+
+  &__event-title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 125%;
+    color: var(--color-black);
+    margin-bottom: 20px;
+
+    @include tablet {
+      font-size: 24px;
+    }
+  }
+
+  &__event-description {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-gray);
+    margin-bottom: 30px;
+
+    @include tablet {
+      margin-bottom: 50px;
+    }
+
+    @include desktop {
+      margin-bottom: 50px;
+    }
+  }
+
+  &__event-register {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-white);
+
+    background-color: var(--color-main);
+    width: 100%;
+    height: 60px;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    transition: background-color var(--transition-duration);
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include desktop {
+      width: 270px;
+    }
+  }
+
+  &__calendar {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-main);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    grid-column: 1 / -1;
+    height: 60px;
+    margin-top: 30px;
+    padding: 0;
+    border: 1px solid var(--color-main);
+    background-color: transparent;
+    cursor: pointer;
+
+    transition: var(--transition-duration);
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+        color: var(--color-white);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include tablet {
+      grid-row: 1;
+      grid-column: 5 / -1;
+      margin-top: 0;
+    }
+
+    @include desktop {
+      grid-column: 10 / 13;
+    }
+  }
+}
diff --git a/src/styles/blocks/_exibitions.scss b/src/styles/blocks/_exibitions.scss
new file mode 100644
index 000000000..cac90646a
--- /dev/null
+++ b/src/styles/blocks/_exibitions.scss
@@ -0,0 +1,232 @@
+.exibitions {
+  margin-top: 90px;
+
+  @include tablet {
+    margin-top: 100px;
+  }
+
+  @include desktop {
+    margin-top: 110px;
+  }
+
+  &__inner {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+
+    @include tablet {
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: 30px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+
+  &__list {
+    grid-column: 1 / -1;
+
+    @include tablet {
+      display: contents;
+    }
+  }
+
+  &__title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 125%;
+    color: var(--color-black);
+
+    grid-column: 1 / -1;
+
+    @include tablet {
+      font-size: 40px;
+      grid-column: 1 / 5;
+    }
+
+    @include desktop {
+      font-size: 48px;
+      line-height: 120%;
+      grid-column: 1 / 7;
+    }
+  }
+
+  &__exibition {
+    margin-top: 60px;
+
+    img {
+      width: 280px;
+      height: 356px;
+      object-fit: cover;
+      margin-bottom: 20px;
+      transition: transform var(--transition-duration) ease-in-out;
+
+      @include tablet {
+        width: 330px;
+        height: 420px;
+        margin-bottom: 30px;
+      }
+
+      @include desktop {
+        width: 570px;
+        height: 484px;
+        margin-bottom: 20px;
+      }
+
+      @include hover {
+        transform: translateY(-20px);
+      }
+    }
+
+    @include tablet {
+      margin-top: 75px;
+      &:first-child {
+        grid-column: 1 / 4;
+      }
+
+      &:last-child {
+        grid-column: 4 / -1;
+      }
+    }
+
+    @include desktop {
+      margin-top: 70px;
+
+      &:first-child {
+        grid-column: 1 / 7;
+      }
+
+      &:last-child {
+        grid-column: 7 / -1;
+      }
+    }
+  }
+
+  &__exibition-date {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-main);
+    margin-bottom: 10px;
+  }
+
+  &__exibition-title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 125%;
+    color: var(--color-black);
+    margin-bottom: 20px;
+
+    @include tablet {
+      font-size: 24px;
+      height: 60px;
+    }
+  }
+
+  &__exibition-description {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-gray);
+    margin-bottom: 30px;
+
+    @include tablet {
+      margin-bottom: 40px;
+    }
+
+    @include desktop {
+      margin-bottom: 50px;
+    }
+  }
+
+  &__exibition-buy {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-white);
+
+    background-color: var(--color-main);
+    width: 100%;
+    height: 60px;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    transition: background-color var(--transition-duration);
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+      }
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include desktop {
+      width: 270px;
+    }
+  }
+
+  &__archive {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-main);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    grid-column: 1 / -1;
+    height: 60px;
+    margin-top: 30px;
+    padding: 0;
+    border: 1px solid var(--color-main);
+    background-color: transparent;
+    cursor: pointer;
+
+    transition: var(--transition-duration);
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+        color: var(--color-white);
+      }
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include tablet {
+      grid-row: 1;
+      grid-column: 5 / -1;
+      margin-top: 0;
+    }
+
+    @include desktop {
+      grid-column: 10 / 13;
+    }
+  }
+}
diff --git a/src/styles/blocks/_footer.scss b/src/styles/blocks/_footer.scss
new file mode 100644
index 000000000..f03bf2388
--- /dev/null
+++ b/src/styles/blocks/_footer.scss
@@ -0,0 +1,223 @@
+.footer {
+  background-color: var(--color-bg);
+  margin-top: 80px;
+  padding-top: 34px;
+  padding-bottom: 30px;
+
+  @include tablet {
+    margin-top: 128px;
+  }
+
+  @include desktop {
+    margin-top: 200px;
+  }
+
+  &__inner {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+
+    @include tablet {
+      grid-template-columns: repeat(6, 1fr);
+      gap: 60px 30px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+      row-gap: 70px;
+    }
+  }
+  &__contacts {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 50px;
+    grid-column: 1 / -1;
+
+    @include tablet {
+      margin-bottom: 0;
+      grid-column: 1 / 3;
+    }
+
+    @include desktop {
+      grid-column: 1 / 5;
+    }
+  }
+  &__contacts-addr {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-white);
+
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 30px;
+
+    a {
+      @include hover {
+        color: var(--color-main);
+      }
+    }
+
+    @include tablet {
+      margin-bottom: 50px;
+    }
+  }
+  &__contacts-title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 150%;
+    color: var(--color-white);
+    margin-bottom: 10px;
+
+    @include tablet {
+      font-size: 20px;
+      margin-bottom: 30px;
+    }
+  }
+  &__contacts-soc1als {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+  }
+  &__contacts-soc1als-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    width: 20px;
+  }
+  &__contacts-soc1als-link {
+    color: var(--color-white);
+    transition-duration: var(--transition-duration);
+
+    @include hover {
+      color: var(--color-main);
+      transform: scale(1.1);
+    }
+  }
+  &__schedule {
+    display: flex;
+    flex-direction: column;
+    grid-column: 1 / -1;
+    margin-bottom: 50px;
+
+    @include tablet {
+      grid-column: 3 / 5;
+      margin-bottom: 0;
+    }
+
+    @include desktop {
+      grid-column: 5 / 9;
+    }
+  }
+  &__schedule-title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 150%;
+    color: var(--color-white);
+    margin-bottom: 10px;
+
+    @include tablet {
+      font-size: 20px;
+      margin-bottom: 30px;
+    }
+  }
+  &__schedule-list {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-white);
+
+    display: flex;
+    flex-direction: column;
+  }
+  &__navigation {
+    display: flex;
+    flex-direction: column;
+    grid-column: 1 / -1;
+    margin-bottom: 60px;
+
+    @include tablet {
+      margin-bottom: 0;
+      grid-column: 5 / -1;
+    }
+
+    @include desktop {
+      grid-column: 9 / -1;
+    }
+  }
+  &__navigation-title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 150%;
+    color: var(--color-white);
+    margin-bottom: 10px;
+
+    @include tablet {
+      font-size: 20px;
+      margin-bottom: 30px;
+    }
+  }
+  &__navigation-list {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-white);
+
+    display: flex;
+    flex-direction: column;
+
+    a {
+      @include hover {
+        color: var(--color-main);
+      }
+    }
+  }
+
+  &__policy {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    grid-column: 1 / -1;
+  }
+  &__policy-copyright {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    text-align: center;
+    color: var(--color-white);
+  }
+
+  &__policy-link {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    text-align: center;
+    color: var(--color-white);
+
+    @include hover {
+      color: var(--color-main);
+    }
+  }
+  &__policy-arrow-up {
+    height: 30px;
+    width: 30px;
+    transition-duration: var(--transition-duration);
+
+    img {
+      filter: brightness(0) invert(1);
+    }
+
+    @include hover {
+      transform: scale(1.1);
+    }
+  }
+}
diff --git a/src/styles/blocks/_header.scss b/src/styles/blocks/_header.scss
new file mode 100644
index 000000000..c67adb90c
--- /dev/null
+++ b/src/styles/blocks/_header.scss
@@ -0,0 +1,98 @@
+.header {
+  background-color: var(--color-bg);
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 80px;
+
+    @include tablet {
+      height: 77px;
+    }
+
+    @include desktop {
+      height: 90px;
+    }
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      filter: brightness(0) invert(1);
+      transition: transform var(--transition-duration) ease;
+      width: 124px;
+      height: 40px;
+    }
+
+    @include hover {
+      img {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  &__control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 40px;
+  }
+
+  &__dropdown-wrapper {
+    position: relative;
+    display: none;
+
+    img {
+      filter: brightness(0) invert(1);
+      transition: transform var(--transition-duration) ease;
+
+      position: absolute;
+      top: 6px;
+      right: 3px;
+    }
+
+    @include tablet {
+      display: block;
+    }
+  }
+
+  &__dropdown {
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-white);
+    font-family: var(--font-family);
+    padding-right: 1rem;
+    cursor: pointer;
+  }
+
+  &__dropdown-option {
+    background-color: var(--color-bg);
+  }
+
+  &__burger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    width: 25px;
+    height: 20px;
+
+    @include hover {
+      scale: 1.1;
+      transition-duration: var(--transition-duration);
+    }
+
+    img {
+      filter: brightness(0) invert(1);
+    }
+  }
+}
diff --git a/src/styles/blocks/_hero.scss b/src/styles/blocks/_hero.scss
new file mode 100644
index 000000000..7d16fa3c1
--- /dev/null
+++ b/src/styles/blocks/_hero.scss
@@ -0,0 +1,191 @@
+.hero {
+  position: relative;
+  width: 100%;
+  background-color: var(--color-bg);
+
+  &__inner {
+    padding-top: 50px;
+
+    @include tablet {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: 30px;
+      padding-top: 100px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+      padding-top: 0;
+    }
+  }
+
+  &__info {
+    display: contents;
+
+    @include desktop {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      grid-column: 1/7;
+      padding-top: 47px;
+    }
+  }
+
+  &__description {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    color: var(--color-white);
+    margin-bottom: 10px;
+
+    grid-row: 1;
+    grid-column: 1/3;
+  }
+
+  &__title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 48px;
+    line-height: 100%;
+    color: var(--color-white);
+    margin-bottom: 30px;
+
+    grid-row: 2;
+    grid-column: 1/6;
+
+    @include tablet {
+      font-size: 72px;
+      margin-bottom: 20px;
+    }
+
+    @include desktop {
+      font-size: 96px;
+      margin-bottom: 30px;
+    }
+  }
+
+  &__subtitle {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-white);
+    margin-bottom: 40px;
+
+    grid-row: 3;
+    grid-column: 1/4;
+
+    @include tablet {
+      margin-bottom: 50px;
+    }
+
+    @include desktop {
+      margin-bottom: 80px;
+    }
+  }
+
+  &__buyticket {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-white);
+
+    background-color: var(--color-main);
+    width: 100%;
+    height: 60px;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    margin-bottom: 40px;
+
+    grid-row: 4;
+    grid-column: 1 / 4;
+
+    transition: background-color var(--transition-duration);
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include tablet {
+      margin-bottom: 70px;
+    }
+
+    @include desktop {
+      width: 270px;
+      margin-bottom: 135px;
+    }
+  }
+
+  &__image {
+    display: flex;
+    justify-content: center;
+    grid-row: 5;
+    grid-column: 2/6;
+
+    @include desktop {
+      grid-row: 1;
+      grid-column: 7/13;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+
+    img {
+      width: 245px;
+      height: 273px;
+      object-fit: cover;
+
+      @include tablet {
+        width: 443px;
+        height: 494px;
+      }
+
+      @include desktop {
+        width: 625px;
+        height: 663px;
+      }
+    }
+  }
+
+  &__date {
+    display: none;
+
+    @include desktop {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      padding-bottom: 50px;
+    }
+  }
+
+  &__duration {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 125%;
+    color: var(--color-white);
+  }
+
+  &__divider {
+    height: 1px;
+    grid-column: 2/7;
+    width: 469px;
+    background: var(--color-white);
+    opacity: 0.3;
+  }
+}
diff --git a/src/styles/blocks/_nav.menu.scss b/src/styles/blocks/_nav.menu.scss
new file mode 100644
index 000000000..82e5c3dd1
--- /dev/null
+++ b/src/styles/blocks/_nav.menu.scss
@@ -0,0 +1,352 @@
+.nav-menu {
+  position: relative;
+  opacity: 0;
+  transform: translateY(-100%);
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--color-bg);
+
+  @include desktop {
+    overflow: hidden;
+  }
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color 0.3s ease;
+  }
+
+  &--open {
+    opacity: 1;
+    transform: translateY(0);
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  &--closing {
+    opacity: 0;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+
+  &:modal {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  &__top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    height: 80px;
+
+    @include tablet {
+      height: 77px;
+    }
+
+    @include desktop {
+      height: 90px;
+    }
+  }
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      filter: brightness(0) invert(1);
+      transition: transform var(--transition-duration) ease;
+      width: 124px;
+      height: 40px;
+    }
+
+    @include hover {
+      img {
+        transform: scale(1.1);
+      }
+    }
+  }
+  &__control {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 30px;
+
+    @include tablet {
+      gap: 40px;
+      flex-direction: row-reverse;
+    }
+  }
+  &__dropdown-wrapper {
+    position: relative;
+
+    img {
+      filter: brightness(0) invert(1);
+      transition: transform var(--transition-duration) ease;
+
+      position: absolute;
+      top: 6px;
+      right: 3px;
+    }
+
+    @include tablet {
+      display: block;
+    }
+  }
+  &__dropdown {
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-white);
+    font-family: var(--font-family);
+    padding-right: 1rem;
+    cursor: pointer;
+  }
+  &__dropdown-option {
+    background-color: var(--color-bg);
+  }
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    width: 22px;
+    height: 22px;
+
+    @include hover {
+      scale: 1.1;
+      transition-duration: var(--transition-duration);
+    }
+
+    img {
+      filter: brightness(0) invert(1);
+    }
+
+    @include desktop {
+      height: 30px;
+      width: 30px;
+    }
+  }
+
+  &__body {
+    display: grid;
+    padding-top: 10px;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+
+    @include tablet {
+      grid-template-columns: repeat(6, 1fr);
+      padding-top: 30px;
+      gap: 50px 30px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+      padding-top: 40px;
+      row-gap: 65px;
+    }
+  }
+
+  &__body-schedule {
+    grid-column: 1 / -1;
+    font-family: var(--font-family);
+    color: var(--color-white);
+    margin-bottom: 20px;
+
+    &-today {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 140%;
+    }
+    &-time {
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 150%;
+    }
+
+    @include tablet {
+      margin-bottom: 0;
+      grid-column: 1 / 3;
+    }
+  }
+  &__body-address {
+    grid-column: 1 / -1;
+    font-family: var(--font-family);
+    color: var(--color-white);
+    margin-bottom: 40px;
+
+    &-title {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 140%;
+    }
+    &-addr {
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 150%;
+    }
+
+    @include tablet {
+      margin-bottom: 0;
+      grid-column: 3 / -1;
+    }
+  }
+
+  &__body-nav {
+    grid-column: 1 / -1;
+  }
+
+  &__body-nav-list {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 150%;
+    color: var(--color-white);
+
+    @include tablet {
+      gap: 30px;
+      font-size: 48px;
+      line-height: 120%;
+    }
+
+    @include desktop {
+      gap: 60px;
+    }
+  }
+
+  &__body-nav-link {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 30px;
+
+    @include hover {
+      &::after {
+        width: 100%;
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 0;
+      translate: 0%;
+      width: 0;
+      height: 1px;
+      background-color: currentColor;
+      transition-duration: inherit;
+    }
+
+    @include tablet {
+      height: 58px;
+    }
+  }
+
+  &__divider {
+    background-color: var(--color-white);
+    height: 1px;
+    grid-column: 1 / -1;
+    margin-top: 40px;
+    margin-bottom: 40px;
+    opacity: 0.3;
+
+    @include tablet {
+      margin: 0;
+    }
+
+    @include desktop {
+      grid-column: 1 / 7;
+    }
+  }
+
+  &__buyticket {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-white);
+
+    background-color: var(--color-main);
+    height: 60px;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    grid-column: 1 / -1;
+
+    transition: background-color var(--transition-duration);
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include tablet {
+      grid-column: 1 / 4;
+    }
+
+    @include desktop {
+      width: 270px;
+      margin-bottom: 135px;
+    }
+  }
+
+  &__body-image {
+    display: none;
+
+    @include tablet {
+      display: flex;
+      justify-content: center;
+      grid-column: 2 / 6;
+    }
+
+    @include desktop {
+      grid-column: 7/13;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+    }
+
+    img {
+      width: 422px;
+      height: 466px;
+      object-fit: cover;
+
+      @include desktop {
+        width: 624px;
+        height: 697px;
+      }
+    }
+  }
+}
diff --git a/src/styles/blocks/_news.scss b/src/styles/blocks/_news.scss
new file mode 100644
index 000000000..8c4cf613f
--- /dev/null
+++ b/src/styles/blocks/_news.scss
@@ -0,0 +1,186 @@
+.news {
+  margin-top: 90px;
+
+  @include tablet {
+    margin-top: 120px;
+  }
+
+  @include desktop {
+    margin-top: 110px;
+  }
+
+  &__inner {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+
+    @include tablet {
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: 30px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+
+  &__title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 125%;
+    color: var(--color-black);
+
+    grid-column: 1 / -1;
+
+    @include tablet {
+      font-size: 40px;
+      grid-column: 1 / 5;
+    }
+
+    @include desktop {
+      font-size: 48px;
+      line-height: 120%;
+      grid-column: 1 / 7;
+    }
+  }
+
+  &__card {
+    margin-top: 60px;
+
+    img {
+      object-fit: cover;
+      width: 280px;
+      height: 280px;
+      margin-bottom: 20px;
+      transition: transform var(--transition-duration) ease-in-out;
+
+      @include tablet {
+        width: 330px;
+        height: 330px;
+        margin-bottom: 30px;
+      }
+
+      @include desktop {
+        width: 570px;
+        height: 370px;
+        margin-bottom: 20px;
+      }
+
+      @include hover {
+        transform: translateY(-20px);
+      }
+    }
+
+    &:first-of-type {
+      grid-column: 1 / -1;
+
+      @include tablet {
+        grid-column: 1 / 4;
+      }
+
+      @include desktop {
+        grid-column: 1 / 7;
+      }
+    }
+
+    &:last-of-type {
+      grid-column: 1 / -1;
+
+      @include tablet {
+        grid-column: 4 / -1;
+      }
+
+      @include desktop {
+        grid-column: 7 / -1;
+      }
+    }
+
+    @include tablet {
+      margin-top: 75px;
+    }
+
+    @include desktop {
+      margin-top: 55px;
+    }
+  }
+
+  &__date {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    color: var(--color-black);
+  }
+
+  &__news-title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 125%;
+    color: var(--color-black);
+
+    margin-bottom: 20px;
+
+    @include tablet {
+      line-height: 150%;
+    }
+  }
+
+  &__descsription {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-gray);
+  }
+
+  &__bntall {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-main);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    grid-column: 1 / -1;
+    height: 60px;
+    margin-top: 30px;
+    padding: 0;
+    border: 1px solid var(--color-main);
+    background-color: transparent;
+    cursor: pointer;
+
+    transition: var(--transition-duration);
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+        color: var(--color-white);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include tablet {
+      grid-row: 1;
+      grid-column: 5 / -1;
+      margin-top: 0;
+    }
+
+    @include desktop {
+      grid-column: 10 / 13;
+    }
+  }
+}
diff --git a/src/styles/blocks/_subscribe.scss b/src/styles/blocks/_subscribe.scss
new file mode 100644
index 000000000..eb457ddca
--- /dev/null
+++ b/src/styles/blocks/_subscribe.scss
@@ -0,0 +1,164 @@
+.subscribe {
+  margin-top: 120px;
+
+  @include tablet {
+    margin-top: 160px;
+  }
+
+  @include desktop {
+    margin-top: 200px;
+  }
+
+  &__inner {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 20px;
+
+    @include tablet {
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: 30px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+    }
+  }
+
+  &__title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 28px;
+    line-height: 125%;
+    color: var(--color-black);
+
+    grid-column: 1 / -1;
+    margin-bottom: 20px;
+
+    @include tablet {
+      font-size: 40px;
+    }
+
+    @include desktop {
+      font-size: 48px;
+      line-height: 120%;
+      grid-column: 1 / 6;
+      margin-bottom: 50px;
+    }
+  }
+
+  &__description {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-black);
+
+    grid-column: 1 / -1;
+    margin-bottom: 50px;
+
+    @include tablet {
+      grid-column: 1 / 6;
+    }
+
+    @include desktop {
+      grid-row: 1;
+      grid-column: 7 / -1;
+    }
+  }
+
+  &__form {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+
+    @include tablet {
+      grid-column: 1 / 5;
+    }
+
+    @include desktop {
+      grid-column: 1 / 6;
+    }
+  }
+
+  &__input {
+    border: none;
+    border-bottom: 1px solid var(--color-black);
+    background-color: var(--color-white);
+    margin-bottom: 30px;
+    outline: none;
+    height: 28px;
+    padding: 0;
+    transition:
+      border-color 0.2s ease,
+      color 0.2s ease;
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-black);
+
+    &::placeholder {
+      color: var(--color-black);
+      opacity: 1;
+      transition: color 0.2s ease;
+    }
+
+    &:hover::placeholder {
+      color: var(--color-main);
+    }
+
+    &:hover {
+      border-color: var(--color-main);
+    }
+
+    &:focus {
+      border-color: var(--color-main);
+      color: var(--color-main);
+    }
+
+    &:not(:placeholder-shown) {
+      font-weight: 600;
+      color: var(--color-black);
+    }
+
+    @include desktop {
+      margin-bottom: 40px;
+    }
+  }
+
+  &__btn {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-white);
+
+    background-color: var(--color-main);
+    height: 60px;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    transition: background-color var(--transition-duration);
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include desktop {
+      width: 270px;
+    }
+  }
+}
diff --git a/src/styles/blocks/_visit.scss b/src/styles/blocks/_visit.scss
new file mode 100644
index 000000000..3c3ec8254
--- /dev/null
+++ b/src/styles/blocks/_visit.scss
@@ -0,0 +1,128 @@
+.visit {
+  background-color: var(--color-bg);
+  position: relative;
+  margin-top: 90px;
+
+  @include tablet {
+    margin-top: 100px;
+  }
+
+  @include desktop {
+    margin-top: 110px;
+  }
+
+  &__inner {
+    padding-top: 50px;
+    padding-bottom: 50px;
+
+    @include tablet {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: 30px;
+      padding-top: 80px;
+      padding-bottom: 80px;
+    }
+
+    @include desktop {
+      grid-template-columns: repeat(12, 1fr);
+      padding-top: 220px;
+      padding-bottom: 205px;
+    }
+  }
+
+  &__title {
+    font-family: var(--second-family);
+    font-weight: 700;
+    font-size: 38px;
+    line-height: 100%;
+    color: var(--color-white);
+    margin-bottom: 20px;
+
+    @include tablet {
+      grid-column: 1 / 6;
+      font-size: 62px;
+      padding-right: 70px;
+    }
+
+    @include desktop {
+      grid-column: 6 / 13;
+      font-size: 80px;
+    }
+  }
+
+  &__description {
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 150%;
+    color: var(--color-white);
+    margin-bottom: 40px;
+
+    @include tablet {
+      grid-column: 1 / 5;
+      margin-bottom: 60px;
+    }
+
+    @include desktop {
+      grid-column: 6 / 11;
+      margin-bottom: 50px;
+    }
+  }
+
+  &__btnstart {
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 100%;
+    text-align: center;
+    color: var(--color-white);
+
+    background-color: var(--color-main);
+    width: 100%;
+    height: 60px;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+
+    transition: background-color var(--transition-duration);
+
+    &:not(:disabled) {
+      @include hover {
+        background-color: var(--button-primary-hover);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--button-primary-disabled);
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):active {
+      background-color: var(--button-primary-pressed);
+    }
+
+    @include tablet {
+      grid-column: 1 / 4;
+    }
+
+    @include desktop {
+      width: 270px;
+      grid-column: 6 / 9;
+    }
+  }
+
+  &__image {
+    img {
+      display: none;
+      width: 578px;
+      height: 800px;
+
+      @include desktop {
+        display: block;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 000000000..456566fa3
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,4 @@
+@import 'normalize', 'media', 'mixins', 'globals', 'variables';
+@import 'blocks/header', 'blocks/hero', 'blocks/exibitions', 'blocks/events',
+  'blocks/visit', 'blocks/news', 'blocks/subscribe', 'blocks/footer',
+  'blocks/nav.menu';
diff --git a/src/styles/main.scss b/src/styles/main.scss
deleted file mode 100644
index fb9195d12..000000000
--- a/src/styles/main.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'utils';
-@import 'fonts';
-@import 'typography';
-
-body {
-  background: $c-gray;
-}
diff --git a/src/styles/utils/_extends.scss b/src/styles/utils/_extends.scss
deleted file mode 100644
index d7201e7b3..000000000
--- a/src/styles/utils/_extends.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-%h1 {
-  font-family: Roboto, sans-serif;
-  font-weight: 400;
-}
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
deleted file mode 100644
index 80c79780d..000000000
--- a/src/styles/utils/_mixins.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@mixin hover($_property, $_toValue) {
-  transition: #{$_property} 0.3s;
-  &:hover {
-    #{$_property}: $_toValue;
-  }
-}
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
deleted file mode 100644
index aeb006ffb..000000000
--- a/src/styles/utils/_vars.scss
+++ /dev/null
@@ -1 +0,0 @@
-$c-gray: #eee;