Update styles on the Additional Topics box

- 🌎 The cases page is getting a makeover
- ⛔ Right now the "Additional Topics" header is unstyled
- ✅ This commit styles it according to mockups, and makes it responsive
  to small screens

_pages/cases.md

@@ -49,9 +49,7 @@ lead: |-
 - [Testing accommodations](https://www.justice.gov/crt/disability-rights-cases?search_api_fulltext=%22Testing+accommodations%22+&sort_by=field_date)
 - [Transportation](https://www.justice.gov/crt/disability-rights-cases?search_api_fulltext=transportation&sort_by=field_date)
 
-<div class="manylinks--bottom">
-[Search Additional Topics](https://www.justice.gov/crt/disability-rights-cases)
-</div>
+[Search additional topics](https://www.justice.gov/crt/disability-rights-cases)
 
 </section>
 

assets/sass/custom/_buttons.scss

@@ -67,4 +67,51 @@ span.usa-sr-only {
   color: black;
 }
 
+.manylinks {
+  background-color: #E1E7F1;
+  padding: 1em;
 
+  ul {
+    @include at-media(mobile) {
+      columns: 1;
+    }
+    @include at-media(tablet) {
+      columns: 2;
+    }
+    @include at-media(desktop) {
+      columns: 3;
+    }
+    column-gap: 1em;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li a {
+      color: #005EA2;
+      font-size: 20px;
+      font-family: "Merriweather", serif;
+      padding: 1em;
+      display: table-row;
+    }
+  }
+
+  & > p > a {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: fit-content;
+
+    color: white;
+    background-color: #005EA2;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    text-decoration: none;
+    padding: 0.75em;
+    font-weight: bold;
+
+    &:hover {
+      color: #FFFFFF;
+    }
+  }
+}