From 65fc0a6117e0a46ac631ad72f75e67b12b139ef8 Mon Sep 17 00:00:00 2001
From: Anton Chornobai <99268928+anton-chornobai@users.noreply.github.com>
Date: Sun, 19 Nov 2023 01:13:36 +0100
Subject: [PATCH] task was done

---
 package.json                   |  3 ++-
 src/styles/blocks/catalog.scss | 14 +++++++++++---
 src/styles/blocks/header.scss  |  7 +++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9814b81e1..4fe9cc0b2 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
     "parcel": "^1.12.4",
     "stylelint": "^13.5.0",
     "stylelint-config-recommended-scss": "^3.3.0",
-    "stylelint-scss": "^3.17.2"
+    "stylelint-scss": "^3.17.2",
+    "sass": "^1.69.5"
   },
   "browserslist": [
     "last 2 versions"
diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss
index ffb6b2ccc..bcb873e9c 100644
--- a/src/styles/blocks/catalog.scss
+++ b/src/styles/blocks/catalog.scss
@@ -1,3 +1,6 @@
+$card-width: 200px;
+$card-height: 300px;
+
 .catalog {
   display: flex;
   flex-wrap: wrap;
@@ -11,15 +14,20 @@
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-
-    width: 200px;
-    height: 300px;
+    width: $card-width;
+    height: $card-height;
     border: 1px solid #ccc;
     border-radius: 5px;
     margin-bottom: 48px;
+    transition-duration: 300ms;
 
     &:not(:nth-child(4n)) {
       margin-right: 48px;
     }
+
+    &:hover {
+      transform: scale(1.2); 
+      color: #34568b;
+    }
   }
 }
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 638a10fef..489721b29 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -38,5 +38,12 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 500;
+    transition-duration: 300ms;
+
+    &:hover {
+      color: #00acdc;
+    }
   }
+
+
 }