restructerd scss

styles/modules/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;
+				}
+			}
+		}
+	}
+}