asset grid tweaks

client/src/routes/Home.module.scss

@@ -12,21 +12,36 @@
         margin: 0;
         visibility: hidden;
     }
+}
 
-    .results {
+.results {
     display: grid;
     grid-template-columns: 1fr;
     grid-gap: $spacer;
+    max-width: calc(18rem + #{$spacer * 2});
+    margin: auto;
 
     @media (min-width: $break-point--small) {
-            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+        margin: 0;
+        max-width: none;
+        grid-template-columns: repeat(2, 1fr);
     }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(3, 1fr);
     }
 }
 
 .title {
     font-size: $font-size-h3;
     margin-top: $spacer * 2;
+    text-align: center;
+    margin-bottom: $spacer;
+
+    @media (min-width: $break-point--small) {
+        text-align: left;
+        margin-bottom: $spacer / 2;
+    }
 }
 
 .categories {

client/src/routes/Search.module.scss

@@ -17,6 +17,10 @@
     grid-gap: $spacer;
 
     @media (min-width: $break-point--small) {
-        grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: $break-point--medium) {
+        grid-template-columns: repeat(3, 1fr);
     }
 }

client/src/routes/Search.tsx

@@ -137,7 +137,8 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                             className={styles.resultsTitle}
                             dangerouslySetInnerHTML={{
                                 __html: `${totalResults} results for <span>${decodeURIComponent(
-                                    this.state.searchTerm
+                                    this.state.searchTerm ||
+                                        this.state.searchCategories
                                 )}</span>`
                             }}
                         />