From 96a0b4bc96e78dcf677ea76f77f43c5fd1a78baa Mon Sep 17 00:00:00 2001
From: mudmykola <mykola.mud@gmail.com>
Date: Sat, 7 Sep 2024 13:41:05 +0300
Subject: [PATCH]  refactor(MovieDetails): redesigned the cartoon display
 structure

---
 .firebase/hosting.ZGlzdA.cache       |  26 +-
 package-lock.json                    | 411 +++++++++++++++++++++++++++
 package.json                         |   1 +
 src/components/cart/MovieDetails.vue | 305 +++++++++++---------
 4 files changed, 592 insertions(+), 151 deletions(-)

diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index 8425b16..c4f2cbd 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,13 +1,13 @@
-index.html,1725661848839,a5ba579cd042436317220aa6355c00c7ba19455ec57561f3680802c59cfb04ed
-assets/fa-v4compatibility-BX8XWJtE.woff2,1725661848839,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
-assets/fa-v4compatibility-B9MWI-E6.ttf,1725661848838,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
-data/cartoons.json,1725661848519,4b0f5046ea26213a33c7a37322714d13ae387e5aaf64fb337f32d751420c0f44
-assets/FavoriteComponent-CUI5jAWD.js,1725661848839,123665bc44e50c4055a322bc36970ec206ea1a593b240c2ac1fb33a14ccdbf9c
-assets/fa-regular-400-DgEfZSYE.woff2,1725661848839,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
-assets/fa-regular-400-Bf3rG5Nx.ttf,1725661848838,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
-assets/fa-brands-400-O7nZalfM.woff2,1725661848838,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
-assets/fa-solid-900-DOQJEhcS.woff2,1725661848839,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
-assets/fa-brands-400-Dur5g48u.ttf,1725661848839,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
-assets/index-C47JBSMj.css,1725661848839,08d883f746e7297201a94c86fc4f8dbdc8c463ce3fe21d4f8413862cc485ef07
-assets/index-5_PANpTl.js,1725661848839,554c0b59e40251323e3d0835ae211fdadeb69347d195e76193d00b3de15f272e
-assets/fa-solid-900-BV3CbEM2.ttf,1725661848839,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
+index.html,1725705582245,0f51471570f93952eb28a60d790de91966355a82cffaed95562b93954179a50e
+assets/fa-v4compatibility-BX8XWJtE.woff2,1725705582245,8945f97a3a1bbd891397f2f7900844dbf1808e9e3924900a31d4acafb11a9db2
+data/cartoons.json,1725705581915,815d99b0fa788645bcd496c1c088f71fea88524618c8eff3113ae8e096bf5e66
+assets/fa-v4compatibility-B9MWI-E6.ttf,1725705582246,d5040b176e185deb1562d78b306cffe3336502f43ad77337eb9b8e464e1ab757
+assets/FavoriteComponent-b8ovRfT1.js,1725705582246,32b1be91544c1dadede04cad22b07770e626f3d97cd2cf480824a59ba2eb92f4
+assets/fa-regular-400-DgEfZSYE.woff2,1725705582245,fb31b3f693b818441c452f39a682d8ad81967e3474b6a2266ddb885177cd98d1
+assets/fa-regular-400-Bf3rG5Nx.ttf,1725705582245,61e9221981e1ad8a27ea29b9aed2d9d1615450c3f99b3a6175c2ef238fa67eb4
+assets/fa-brands-400-O7nZalfM.woff2,1725705582246,5446f4c298ee6694ba92500f91741668e1ff9c8c08cb018a4f414fb663acae9e
+assets/fa-solid-900-DOQJEhcS.woff2,1725705582246,7a9c4ef0dd299dfd976428e4cb9c86fc13ebd4eed7604f035476e69af3f56b9d
+assets/fa-brands-400-Dur5g48u.ttf,1725705582245,8a036bca81921a2f3fc90c860fde21f0e8066cdf3507cf9999dd2a47cac380b1
+assets/index-yctjN2d9.css,1725705582246,ec2f3c1ac416a08780c24d192db74fb2767c59730f2250cf7719e429ef230286
+assets/index-IPhrKbjA.js,1725705582245,da319a2c7d975f6c4a9b81fdcc5b40c6a4b6c65e0e779ee2c92508678435d885
+assets/fa-solid-900-BV3CbEM2.ttf,1725705582246,af1fb4d30a49d562da382fdc49f386e2c8075bbbe26a5ecbbcdcf8994aaa423d
diff --git a/package-lock.json b/package-lock.json
index 9411390..54bf767 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
         "lint-staged": "^15.2.9",
         "postcss": "^8.4.41",
         "prettier": "^3.3.3",
+        "sass-embedded": "^1.78.0",
         "tailwindcss": "^3.4.9",
         "vite": "^5.4.0",
         "vue-loader": "^17.4.2"
@@ -89,6 +90,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.0.tgz",
+      "integrity": "sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==",
+      "dev": true
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -2000,6 +2007,12 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-builder": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz",
+      "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==",
+      "dev": true
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -3082,6 +3095,12 @@
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
       "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -4375,6 +4394,15 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -4399,6 +4427,383 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/sass-embedded": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.78.0.tgz",
+      "integrity": "sha512-NR2kvhWVFABmBm0AqgFw9OweQycs0Qs+/teJ9Su+BUY7up+f8S5F/Zi+7QtAqJlewsQyUNfzm1vRuM+20lBwRQ==",
+      "dev": true,
+      "dependencies": {
+        "@bufbuild/protobuf": "^1.0.0",
+        "buffer-builder": "^0.2.0",
+        "immutable": "^4.0.0",
+        "rxjs": "^7.4.0",
+        "supports-color": "^8.1.1",
+        "varint": "^6.0.0"
+      },
+      "bin": {
+        "sass": "dist/bin/sass.js"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "optionalDependencies": {
+        "sass-embedded-android-arm": "1.78.0",
+        "sass-embedded-android-arm64": "1.78.0",
+        "sass-embedded-android-ia32": "1.78.0",
+        "sass-embedded-android-riscv64": "1.78.0",
+        "sass-embedded-android-x64": "1.78.0",
+        "sass-embedded-darwin-arm64": "1.78.0",
+        "sass-embedded-darwin-x64": "1.78.0",
+        "sass-embedded-linux-arm": "1.78.0",
+        "sass-embedded-linux-arm64": "1.78.0",
+        "sass-embedded-linux-ia32": "1.78.0",
+        "sass-embedded-linux-musl-arm": "1.78.0",
+        "sass-embedded-linux-musl-arm64": "1.78.0",
+        "sass-embedded-linux-musl-ia32": "1.78.0",
+        "sass-embedded-linux-musl-riscv64": "1.78.0",
+        "sass-embedded-linux-musl-x64": "1.78.0",
+        "sass-embedded-linux-riscv64": "1.78.0",
+        "sass-embedded-linux-x64": "1.78.0",
+        "sass-embedded-win32-arm64": "1.78.0",
+        "sass-embedded-win32-ia32": "1.78.0",
+        "sass-embedded-win32-x64": "1.78.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm/-/sass-embedded-android-arm-1.78.0.tgz",
+      "integrity": "sha512-YM6nrmKsj+ImaSTd96F+jzbWSbhPkRN4kedbLgIJ5FsILNa9NAqhmrCQz9pdcjuAhyfxWImdUACsT23CPGENZQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-arm64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-arm64/-/sass-embedded-android-arm64-1.78.0.tgz",
+      "integrity": "sha512-2sAr11EgwPudAuyk4Ite+fWGYJspiFSiZDU2D8/vjjI7BaB9FG6ksYqww3svoMMnjPUWBCjKPDELpZTxViLJbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-ia32": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-ia32/-/sass-embedded-android-ia32-1.78.0.tgz",
+      "integrity": "sha512-TyJOo4TgnHpOfC/PfqCBqd+jGRanWoRd4Br/0KAfIvaIFjTGIPdk26vUyDVugV1J8QUEY4INGE8EXAuDeRldUQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-riscv64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-riscv64/-/sass-embedded-android-riscv64-1.78.0.tgz",
+      "integrity": "sha512-wwajpsVRuhb7ixrkA3Yu60V2LtROYn45PIYeda30/MrMJi9k3xEqHLhodTexFm6wZoKclGSDZ6L9U5q0XyRKiQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-android-x64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-android-x64/-/sass-embedded-android-x64-1.78.0.tgz",
+      "integrity": "sha512-k5l66PO0LgSHMDbDzAQ/vqrXMlJ3r42ZHJA8MJvUbA6sQxTzDS381V7L+EhOATwyI225j2FhEeTHW6rr4WBQzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-arm64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-arm64/-/sass-embedded-darwin-arm64-1.78.0.tgz",
+      "integrity": "sha512-3JaxceFSR6N+a22hPYYkj1p45eBaWTt/M8MPTbfzU3TGZrU9bmRX7WlUVtXTo1yYI2iMf22nCv0PQ5ExFF3FMQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-darwin-x64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-darwin-x64/-/sass-embedded-darwin-x64-1.78.0.tgz",
+      "integrity": "sha512-UMTijqE3fJ8vEaaD7GPG7G3GsHuPKOdpS8vuA2v2uwO3BPFp/rEKah66atvGqvGO+0JYApkSv0YTnnexSrkHIQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm/-/sass-embedded-linux-arm-1.78.0.tgz",
+      "integrity": "sha512-JafT+Co0RK8oO3g9TfVRuG7tkYeh35yDGTgqCFxLrktnkiw5pmIagCfpjxk5GBcSfJMOzhCgclTCDJWAuHGuMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-arm64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-arm64/-/sass-embedded-linux-arm64-1.78.0.tgz",
+      "integrity": "sha512-juMIMpp3DIAiQ842y+boqh0u2SjN4m3mDKrDfMuBznj8DSQoy9J/3e4hLh3g+p0/j83WuROu5nNoYxm2Xz8rww==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-ia32": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-ia32/-/sass-embedded-linux-ia32-1.78.0.tgz",
+      "integrity": "sha512-Gy8GW5g6WX9t8CT2Dto5AL6ikB+pG7aAXWXvfu3RFHktixSwSbyy6CeGqSk1t0xyJCFkQQA/V8HU9bNdeHiBxg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm/-/sass-embedded-linux-musl-arm-1.78.0.tgz",
+      "integrity": "sha512-DUVXtcsfsiOJ2Zwp4Y3T6KZWX8h0gWpzmFUrx+gSIbg67vV8Ww2DWMjWRwqLe7HOLTYBegMBYpMgMgZiPtXhIA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-arm64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-arm64/-/sass-embedded-linux-musl-arm64-1.78.0.tgz",
+      "integrity": "sha512-Lu/TlRHbe9aJY7B7PwWCJz7pTT5Rc50VkApWEmPiU/nu0mGbSpg0Xwar6pNeG8+98ubgKKdRb01N3bvclf5a4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-ia32": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-ia32/-/sass-embedded-linux-musl-ia32-1.78.0.tgz",
+      "integrity": "sha512-1E5ywUnq6MRPAecr2r/vDOBr93wXyculEmfyF5JRG8mUufMaxGIhfx64OQE6Drjs+EDURcYZ+Qcg6/ubJWqhcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-riscv64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-riscv64/-/sass-embedded-linux-musl-riscv64-1.78.0.tgz",
+      "integrity": "sha512-YvQEvX7ctn5BwC79+HBagDYIciEkwcl2NLgoydmEsBO/0+ncMKSGnjsn/iRzErbq1KJNyjGEni8eSHlrtQI1vQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-musl-x64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-musl-x64/-/sass-embedded-linux-musl-x64-1.78.0.tgz",
+      "integrity": "sha512-azdUcZZvZmtUBslIKr2/l4aQrTX7BvO96TD0GLdWz9vuXZrokYm09AJZEnb5j6Pk5I4Xr0yM6BG1Vgcbzqi5Zg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-riscv64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-riscv64/-/sass-embedded-linux-riscv64-1.78.0.tgz",
+      "integrity": "sha512-g8M6vqHMjZUoH9C1WJsgwu+qmwdJAAMDaJTM1emeAScUZMTaQGzm+Q6C5oSGnAGR3XLT/drgbHhbmruXDgkdeQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-linux-x64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-linux-x64/-/sass-embedded-linux-x64-1.78.0.tgz",
+      "integrity": "sha512-m997ThzpMwql4u6LzZCoHPIQkgK6bbLPLc7ydemo2Wusqzh6j8XAGxVT5oANp6s2Dmj+yh49pKDozal+tzEX9w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-arm64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-arm64/-/sass-embedded-win32-arm64-1.78.0.tgz",
+      "integrity": "sha512-qTLIIC5URYRmeuYYllfoL0K1cHSUd+f3sFHAA6fjtdgf288usd6ToCbWpuFb0BtVceEfGQX8lEp+teOG7n7Quw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-ia32": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-ia32/-/sass-embedded-win32-ia32-1.78.0.tgz",
+      "integrity": "sha512-BrOWh18T6Y9xgCokGXElEnd8j03fO4W83bwJ9wHRRkrQWaeHtHs3XWW0fX1j2brngWUTjU+jcYUijWF1Z60krw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded-win32-x64": {
+      "version": "1.78.0",
+      "resolved": "https://registry.npmjs.org/sass-embedded-win32-x64/-/sass-embedded-win32-x64-1.78.0.tgz",
+      "integrity": "sha512-C14iFDJd7oGhmQehRiEL7GtzMmLwubcDqsBarQ+u9LbHoDlUQfIPd7y8mVtNgtxJCdrAO/jc5qR4C+85yE3xPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/sass-embedded/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
     "node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -4982,6 +5387,12 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/varint": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",
+      "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==",
+      "dev": true
+    },
     "node_modules/verror": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
diff --git a/package.json b/package.json
index e051d99..e50ba6f 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "lint-staged": "^15.2.9",
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
+    "sass-embedded": "^1.78.0",
     "tailwindcss": "^3.4.9",
     "vite": "^5.4.0",
     "vue-loader": "^17.4.2"
diff --git a/src/components/cart/MovieDetails.vue b/src/components/cart/MovieDetails.vue
index e083426..c4b130c 100644
--- a/src/components/cart/MovieDetails.vue
+++ b/src/components/cart/MovieDetails.vue
@@ -12,6 +12,8 @@ const buttonNextEpisode = 'Наступна серія';
 const buttonBackHome = 'На головну';
 const buttonAutoPlayOn = 'Автоперемикання увімкнено';
 const buttonAutoPlayOff = 'Автоперемикання вимкнено';
+const buttonShowComments = 'Показати коментарі';
+const buttonHideComments = 'Сховати коментарі';
 
 const route = useRoute();
 const router = useRouter();
@@ -20,6 +22,7 @@ const episodePlayer = ref(null);
 const isLoading = ref(true);
 const videoElement = ref(null);
 const autoPlayEnabled = ref(true);
+const showComments = ref(false);
 
 onMounted(async () => {
   const movieId = parseInt(route.params.id);
@@ -70,17 +73,30 @@ const handleVideoEnd = () => {
 const toggleAutoPlay = () => {
   autoPlayEnabled.value = !autoPlayEnabled.value;
 };
+
+const toggleComments = () => {
+  showComments.value = !showComments.value;
+};
 </script>
 
 <template>
   <DefaultLayout>
-    <div class="p-4 sm:p-6 max-w-full mx-auto bg-gray-900 text-white">
+    <div class="relative min-h-screen bg-gray-900 text-white">
       <div
-        class="mb-4 flex flex-col sm:flex-row sm:justify-between items-center"
+        class="absolute inset-0 bg-cover bg-center"
+        :style="{
+          backgroundImage: `url(${movieStore.movie?.bgPosterUrl || movieStore.movie?.posterUrl})`,
+        }"
       >
+        <div
+          class="bg-gradient-to-t from-gray-900 via-gray-900 to-transparent h-full"
+        ></div>
+      </div>
+
+      <div class="relative p-4 sm:p-6 max-w-full mx-auto z-10">
         <button
           @click="goBack"
-          class="p-3 bg-gray-600 text-white rounded-md flex items-center hover:bg-red-700 transition duration-300 mb-4 sm:mb-0"
+          class="back-btn absolute top-4 left-4 p-3 bg-gray-800 text-white rounded-md flex items-center hover:bg-red-600 transition duration-300 shadow-lg"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -97,148 +113,144 @@ const toggleAutoPlay = () => {
           </svg>
           {{ buttonBackHome }}
         </button>
-
-        <div class="flex items-center">
-          <span class="mr-4 text-white">
-            {{ autoPlayEnabled ? buttonAutoPlayOn : buttonAutoPlayOff }}
-          </span>
-          <label class="relative inline-flex items-center cursor-pointer">
-            <input type="checkbox" class="sr-only" v-model="autoPlayEnabled" />
-            <div class="w-10 h-6 bg-gray-600 rounded-full shadow-inner"></div>
-            <div
-              class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full shadow transform transition-transform"
-              :class="{
-                'translate-x-4': autoPlayEnabled,
-              }"
-            ></div>
-          </label>
+        <div v-if="isLoading" class="flex justify-center items-center h-screen">
+          <div
+            class="border-t-4 border-red-600 rounded-full w-16 h-16 animate-spin"
+          ></div>
         </div>
-      </div>
-
-      <div v-if="isLoading" class="flex justify-center items-center h-64">
-        <div
-          class="loader border-t-4 border-blue-500 rounded-full w-12 h-12 animate-spin"
-        ></div>
-      </div>
-
-      <div v-else>
-        <div v-if="movieStore.movie" class="flex flex-col md:flex-row">
-          <div class="flex-shrink-0 mb-6 md:mb-0 md:w-1/3">
+        <div v-else>
+          <div class="flex flex-col md:flex-row md:items-center">
             <img
-              :src="movieStore.movie.posterUrl"
+              :src="movieStore.movie?.posterUrl"
               alt="Movie Poster"
-              class="w-full h-64 md:h-80 object-cover rounded-md shadow-lg"
+              class="w-full md:w-80 h-64 md:h-96 object-cover rounded-md shadow-lg border-4 border-red-600"
             />
-          </div>
-
-          <div class="flex-1 md:pl-6">
-            <h1 class="text-2xl md:text-3xl font-bold mb-4">
-              {{ movieStore.movie.title }}
-            </h1>
-            <p class="text-sm md:text-base mb-4">
-              {{ movieStore.movie.description }}
-            </p>
-
-            <div class="max-h-80 overflow-y-auto">
-              <div
-                v-for="season in movieStore.movie.seasons"
-                :key="season.seasonNumber"
-                class="mb-6"
+            <div class="md:pl-6 mt-4 md:mt-0 flex-1">
+              <h1
+                class="text-2xl md:text-4xl font-bold mb-4 border-b-2 border-red-600 pb-2"
               >
-                <h2
-                  class="text-lg md:text-xl font-semibold mb-2 cursor-pointer flex items-center justify-between p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-300"
-                  @click="movieStore.toggleSeason(season.seasonNumber)"
+                {{ movieStore.movie?.title }}
+              </h1>
+              <p class="text-sm md:text-lg mb-4">
+                {{ movieStore.movie?.description }}
+              </p>
+
+              <div class="space-y-4 md:space-y-6">
+                <div
+                  v-for="season in movieStore.movie?.seasons"
+                  :key="season.seasonNumber"
+                  class="bg-gray-800 p-4 rounded-md border-2 border-gray-700"
                 >
-                  {{ seasonTitle }} {{ season.seasonNumber }}
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    :class="{
-                      'rotate-180':
-                        movieStore.selectedSeason === season.seasonNumber,
-                    }"
-                    class="w-5 h-5 transform transition-transform duration-300"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                    aria-hidden="true"
+                  <h2
+                    class="text-lg md:text-xl font-semibold mb-2 cursor-pointer flex items-center justify-between"
+                    @click="movieStore.toggleSeason(season.seasonNumber)"
                   >
-                    <path
-                      fill-rule="evenodd"
-                      d="M14.293 6.293a1 1 0 011.414 1.414L11.414 12l4.293 4.293a1 1 0 01-1.414 1.414l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </h2>
+                    {{ seasonTitle }} {{ season.seasonNumber }}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      :class="{
+                        'rotate-180':
+                          movieStore.selectedSeason === season.seasonNumber,
+                      }"
+                      class="w-5 h-5 transform transition-transform duration-300"
+                      viewBox="0 0 24 24"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M14.293 6.293a1 1 0 011.414 1.414L11.414 12l4.293 4.293a1 1 0 01-1.414 1.414l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 0z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </h2>
 
-                <ul
-                  v-if="movieStore.selectedSeason === season.seasonNumber"
-                  class="list-disc list-inside pl-4"
-                >
-                  <li
-                    v-for="episode in season.episodes"
-                    :key="episode.id"
-                    @click="movieStore.selectEpisode(episode)"
-                    :class="{
-                      'text-red-500': movieStore.currentEpisode === episode,
-                    }"
-                    class="mb-2 cursor-pointer hover:underline transition duration-300"
+                  <ul
+                    v-if="movieStore.selectedSeason === season.seasonNumber"
+                    class="list-disc list-inside pl-4"
                   >
-                    {{ episode.episodeNumber }}. {{ episode.title }}
-                  </li>
-                </ul>
+                    <li
+                      v-for="episode in season.episodes"
+                      :key="episode.id"
+                      @click="movieStore.selectEpisode(episode)"
+                      :class="{
+                        'text-red-400': movieStore.currentEpisode === episode,
+                      }"
+                      class="mb-2 cursor-pointer hover:underline transition duration-300"
+                    >
+                      {{ episode.episodeNumber }}. {{ episode.title }}
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-
-        <div v-if="movieStore.currentEpisode" ref="episodePlayer" class="mt-6">
-          <h3 class="text-lg text-white md:text-xl font-semibold mb-2">
-            {{ movieStore.currentEpisode.title }}
-          </h3>
-          <video
-            ref="videoElement"
-            v-if="movieStore.currentEpisode.videoUrl"
-            :src="movieStore.currentEpisode.videoUrl"
-            class="w-full h-[50vh] md:h-[60vh] rounded-md border border-gray-800 shadow-lg"
-            controls
-            autoplay
-            @ended="handleVideoEnd"
-          ></video>
-        </div>
-
-        <div
-          v-if="movieStore.currentEpisode"
-          class="mt-6 flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"
-        >
-          <button
-            @click="
-              movieStore.playPreviousEpisode(
-                movieStore.movie.seasons.find(
-                  (s) => s.seasonNumber === movieStore.selectedSeason
-                )
-              )
-            "
-            class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-300"
+          <div
+            v-if="movieStore.currentEpisode"
+            ref="episodePlayer"
+            class="mt-6"
           >
-            {{ buttonPreviousEpisode }}
-          </button>
-          <button
-            @click="
-              movieStore.playNextEpisode(
-                movieStore.movie.seasons.find(
-                  (s) => s.seasonNumber === movieStore.selectedSeason
-                )
-              )
-            "
-            class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-300"
+            <h3
+              class="episode-player__title text-xl text-white md:text-2xl font-semibold mb-4 border-b-2 border-red-600 pb-2 flex items-center justify-between"
+            >
+              {{ movieStore.currentEpisode.title }}
+              <button
+                @click="toggleAutoPlay"
+                class="autoplay-btn px-4 py-2 bg-gray-800 text-white rounded-md flex items-center hover:bg-red-600 transition duration-300 shadow-lg"
+              >
+                {{ autoPlayEnabled ? buttonAutoPlayOn : buttonAutoPlayOff }}
+              </button>
+            </h3>
+            <video
+              ref="videoElement"
+              v-if="movieStore.currentEpisode.videoUrl"
+              :src="movieStore.currentEpisode.videoUrl"
+              class="w-full h-[50vh] md:h-[60vh] rounded-md border border-gray-800 shadow-lg"
+              controls
+              autoplay
+              @ended="handleVideoEnd"
+            ></video>
+          </div>
+          <div
+            v-if="movieStore.currentEpisode"
+            class="mt-6 flex flex-col md:flex-row md:space-x-4 justify-center space-y-4 md:space-y-0"
           >
-            {{ buttonNextEpisode }}
-          </button>
-        </div>
-
-        <div class="comment mt-8">
-          <div v-if="movieStore.currentEpisode">
-            <MovieComments :movieId="route.params.id" />
-            <AddComment :movieId="route.params.id" />
+            <button
+              @click="
+                movieStore.playPreviousEpisode(
+                  movieStore.movie.seasons.find(
+                    (s) => s.seasonNumber === movieStore.selectedSeason
+                  )
+                )
+              "
+              class="px-4 py-2 bg-gray-800 text-white rounded-md flex items-center hover:bg-red-600 transition duration-300 shadow-lg"
+            >
+              {{ buttonPreviousEpisode }}
+            </button>
+            <button
+              @click="
+                movieStore.playNextEpisode(
+                  movieStore.movie.seasons.find(
+                    (s) => s.seasonNumber === movieStore.selectedSeason
+                  )
+                )
+              "
+              class="px-4 py-2 bg-gray-800 text-white rounded-md flex items-center hover:bg-red-600 transition duration-300 shadow-lg"
+            >
+              {{ buttonNextEpisode }}
+            </button>
+          </div>
+          <div class="mt-6 flex justify-center">
+            <button
+              @click="toggleComments"
+              class="px-4 py-2 bg-gray-800 text-white rounded-md flex items-center hover:bg-red-600 transition duration-300 shadow-lg"
+            >
+              {{ showComments ? buttonHideComments : buttonShowComments }}
+            </button>
+          </div>
+          <div v-if="showComments" class="mt-6">
+            <AddComment />
+            <MovieComments />
           </div>
         </div>
       </div>
@@ -246,14 +258,31 @@ const toggleAutoPlay = () => {
   </DefaultLayout>
 </template>
 
-<style scoped>
-.loader {
-  border-width: 2px;
-  border-style: solid;
-  border-top-color: transparent;
+<style lang="scss" scoped>
+video {
+  max-width: 100%;
+  height: auto;
+}
+.autoplay-btn {
+  font-size: 18px;
+  line-height: 24px;
 }
 
-.dot {
-  transition: transform 0.2s;
+@media only screen and (max-width: 430px) {
+  .episode-player__title {
+    flex-direction: column;
+  }
+  .autoplay-btn {
+    font-size: 15px;
+    line-height: 15px;
+    background: red;
+    margin-left: auto;
+    display: block;
+  }
+  .back-btn {
+    top: 0;
+    font-size: 15px;
+    line-height: 15px;
+  }
 }
 </style>