From 374654c7ef986e519f534d702d9ff42c0ee019ce Mon Sep 17 00:00:00 2001
From: Kevin Kays <Kevin.Kays@usdoj.gov>
Date: Mon, 18 Nov 2024 13:00:49 -0500
Subject: [PATCH] Update styles on the Additional Topics box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 🌎 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                  |  4 +--
 assets/sass/custom/_buttons.scss | 47 ++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/_pages/cases.md b/_pages/cases.md
index e103e7cf6..f9ab634d6 100644
--- a/_pages/cases.md
+++ b/_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>
 
diff --git a/assets/sass/custom/_buttons.scss b/assets/sass/custom/_buttons.scss
index 69a8b499c..68aec7723 100644
--- a/assets/sass/custom/_buttons.scss
+++ b/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;
+    }
+  }
+}