From 1a03116e40bdc675929582700277cbbe2bf8613c Mon Sep 17 00:00:00 2001
From: isHardCoded <ishardcoded@gmail.com>
Date: Mon, 7 Jul 2025 13:15:19 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BD=D0=B5=D1=81?=
 =?UTF-8?q?=D0=BB=D0=B8=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D0=B2=20=D1=81=D0=BE=D0=BE=D1=82=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=82=D1=81=D1=82=D0=B2=D1=83=D1=8E=D1=89=D0=B8=D0=B5=20=D1=84?=
 =?UTF-8?q?=D0=B0=D0=B9=D0=BB=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.module.scss                     | 116 ------------------------
 src/components/card/index.module.scss   |  48 ++++++++++
 src/components/header/index.module.scss |  55 +++++++++++
 src/components/list/index.module.scss   |   7 ++
 4 files changed, 110 insertions(+), 116 deletions(-)

diff --git a/src/App.module.scss b/src/App.module.scss
index 7e63122..28d1a98 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -4,119 +4,3 @@
 	max-width: 1170px;
 	margin: 0 auto;
 }
-
-/* HEADER */
-
-.header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	border-bottom: 1px solid gainsboro;
-	padding: 30px 0;
-
-	h2 {
-		font-size: 24px;
-	}
-
-	ul {
-		list-style: none;
-		display: flex;
-		gap: 48px;
-
-		a {
-			color: black;
-			text-decoration: none;
-			font-size: 16px;
-			cursor: pointer;
-		}
-	}
-
-	.search {
-		display: flex;
-		align-items: center;
-		background-color: #f5f5f5;
-		padding: 7px 12px;
-		gap: 35px;
-
-		input {
-			outline: 0;
-			border: 0;
-			background-color: #f5f5f5;
-			font-size: 12px;
-		}
-
-		img {
-			cursor: pointer;
-		}
-	}
-
-	.buttons {
-		display: flex;
-		gap: 16px;
-
-		button {
-			background: none;
-			outline: 0;
-			border: 0;
-			cursor: pointer;
-		}
-	}
-}
-
-/* PRODUCT LIST */
-.list {
-	display: flex;
-	flex-wrap: wrap;
-	list-style: none;
-	padding-top: 60px;
-	gap: 30px;
-}
-
-/* PRODUCT CARD */
-
-.product {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-	width: 270px;
-
-	.image {
-		background-color: #f5f5f5;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 35px;
-		height: 250px;
-		position: relative;
-
-		.buttons {
-			position: absolute;
-			top: 12px;
-			right: 12px;
-
-			button {
-				display: flex;
-				outline: 0;
-				border: 0;
-				border-radius: 50%;
-				padding: 10px;
-				background-color: white;
-
-				cursor: pointer;
-			}
-		}
-	}
-
-	.content {
-		h4 {
-			font-size: 16px;
-		}
-
-		.stats {
-			span {
-				font-size: 16px;
-				color: $primary-color;
-			}
-		}
-	}
-}
diff --git a/src/components/card/index.module.scss b/src/components/card/index.module.scss
index e69de29..b78a18b 100644
--- a/src/components/card/index.module.scss
+++ b/src/components/card/index.module.scss
@@ -0,0 +1,48 @@
+@use '../../assets/styles/variables' as *;
+
+.product {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 270px;
+
+	.image {
+		background-color: #f5f5f5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 35px;
+		height: 250px;
+		position: relative;
+
+		.buttons {
+			position: absolute;
+			top: 12px;
+			right: 12px;
+
+			button {
+				display: flex;
+				outline: 0;
+				border: 0;
+				border-radius: 50%;
+				padding: 10px;
+				background-color: white;
+
+				cursor: pointer;
+			}
+		}
+	}
+
+	.content {
+		h4 {
+			font-size: 16px;
+		}
+
+		.stats {
+			span {
+				font-size: 16px;
+				color: $primary-color;
+			}
+		}
+	}
+}
diff --git a/src/components/header/index.module.scss b/src/components/header/index.module.scss
index e69de29..dc9978a 100644
--- a/src/components/header/index.module.scss
+++ b/src/components/header/index.module.scss
@@ -0,0 +1,55 @@
+.header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: 1px solid gainsboro;
+	padding: 30px 0;
+
+	h2 {
+		font-size: 24px;
+	}
+
+	ul {
+		list-style: none;
+		display: flex;
+		gap: 48px;
+
+		a {
+			color: black;
+			text-decoration: none;
+			font-size: 16px;
+			cursor: pointer;
+		}
+	}
+
+	.search {
+		display: flex;
+		align-items: center;
+		background-color: #f5f5f5;
+		padding: 7px 12px;
+		gap: 35px;
+
+		input {
+			outline: 0;
+			border: 0;
+			background-color: #f5f5f5;
+			font-size: 12px;
+		}
+
+		img {
+			cursor: pointer;
+		}
+	}
+
+	.buttons {
+		display: flex;
+		gap: 16px;
+
+		button {
+			background: none;
+			outline: 0;
+			border: 0;
+			cursor: pointer;
+		}
+	}
+}
diff --git a/src/components/list/index.module.scss b/src/components/list/index.module.scss
index e69de29..19d3736 100644
--- a/src/components/list/index.module.scss
+++ b/src/components/list/index.module.scss
@@ -0,0 +1,7 @@
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding-top: 60px;
+	gap: 30px;
+}