Makes the layout responsive

src/app.scss

@@ -10,7 +10,7 @@ body {
 	background-image: var(--background-image);
 	background-size: cover;
 	background-position: center;
-	color: var(--text);
+	color: var(--text) !important;
 	transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
 }
 
@@ -128,23 +128,59 @@ main {
 		gap: 32px;
 	}
 
-	.service-group {
-		background: lime;
-	}
-
-	.service-group.layout-column {
+	.group .services.layout-column {
 		display: flex;
 		flex-flow: column nowrap;
 		gap: 16px;
 	}
 
-	.service-group.layout-row {
+	.group .services.layout-row {
 		display: grid;
 		grid-template-columns: var(--layout-template);
 		gap: 16px;
 	}
 
-	.service-card {
-		background: orange;
+	@media (max-width: 768px) {
+		.layout-column {
+			grid-template-columns: 1fr;
+		}
+
+		.group .services.layout-row {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	.group .header {
+		display: flex;
+		flex-flow: row nowrap;
+		font-size: 1.7em;
+		padding-bottom: 8px;
+	}
+
+	.card {
+		background: var(--card-background);
+		transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.media-content {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.card .image {
+		width: 48px;
+		height: 48px;
+		font-size: 48px;
+	}
+
+	.card:hover {
+		transform: translate(0, -3px);
+
+		.tag {
+		}
 	}
 }