Now starting with real commit messages

styles/Category.module.scss

@@ -0,0 +1,55 @@
+@import "variables.scss";
+.category {
+	h1 {
+		text-align: center;
+		font-size: 1.5em;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		margin-top: 50px;
+		row-gap: 50px;
+		padding: 0px 20px 0 20px;
+		.showcase {
+			display: grid;
+			grid-template-columns: 1fr 1fr 1fr;
+			gap: 10px 10px;
+
+			@media (max-width: $category-breakpoint-1) {
+				grid-template-columns: 1fr 1fr;
+			}
+
+			@media (max-width: $category-breakpoint-2) {
+				grid-template-columns: 1fr;
+			}
+			h2 {
+				font-size: 1em;
+				grid-column: 1 / -1;
+			}
+
+			a {
+				background-color: rgba(126, 126, 126, 0.1);
+				box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.1);
+				padding: 20px;
+				transition: all 50ms linear;
+				text-overflow: ellipsis;
+				max-width: 300px;
+				&:hover {
+					background-color: rgba(126, 126, 126, 0.2);
+					box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.2);
+				}
+			}
+		}
+
+		.smallShowcase {
+			@media (max-width: $category-breakpoint-2) {
+				& > a:nth-child(n + 5) {
+					display: none;
+				}
+			}
+		}
+	}
+}

styles/CategoryList.module.scss

@@ -48,7 +48,7 @@
 					justify-content: center;
 					align-items: center;
 					row-gap: 20px;
-					background-color: #384d54;
+					background-color: #383d54;
 					color: white;
 					font-size: 0.8em;
 					transition: all 100ms linear;

styles/variables.scss

@@ -26,3 +26,8 @@ $nav-breakpoint-4: 400px;
 /* CategoryList */
 $categoryList-breakpoint-1: 850px;
 $categoryList-breakpoint-2: 600px;
+
+/* Category */
+
+$category-breakpoint-1: 800px;
+$category-breakpoint-2: 550px;