Перенесли стили для компонентов в соответствующие файлы

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;
-			}
-		}
-	}
-}

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;
+			}
+		}
+	}
+}

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;
+		}
+	}
+}

src/components/list/index.module.scss

@@ -0,0 +1,7 @@
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	padding-top: 60px;
+	gap: 30px;
+}