Add responsive to Credits page

src/routes/credits.svelte

@@ -15,8 +15,8 @@
 
 <main class="credits">
     <section class="credits__heading">
-        <SiteTitle variant="large" />
-        <p>{data.credits.text}</p>
+        <SiteTitle variant="inline" />
+        <p class="text-medium">{data.credits.text}</p>
     </section>
 
     <section class="credits__list">

src/style/atoms/_site-title.scss

@@ -74,7 +74,7 @@
         span {
             display: block;
             top: 0;
-            margin: 8px 0 6px;
+            margin: 10px 0;
             font-size: rem(20px);
 
             @include bp (sm) {

src/style/pages/_credits.scss

@@ -1,18 +1,22 @@
 // Credits Page
 .credits {
-    padding: 160px 0;
+    // padding: 160px 0;
 
     // Intro Section
     &__heading {
         overflow: hidden;
-        margin-bottom: 72px;
+        margin: 56px 0 72px;
         color: $color-tertiary;
         text-align: center;
 
+        @include bp (sm) {
+            margin: 160px 0 72px;
+        }
+
         // Text
         p {
-            max-width: 350px;
-            margin: 20px auto 56px;
+            max-width: 320px;
+            margin: 50px auto 0;
             font-weight: 300;
 
             @include bp (sm) {
@@ -24,46 +28,82 @@
 
     // List
     &__list {
-        margin-top: 160px;
+        padding-bottom: 96px;
+
+        @include bp (sm, max) {
+            text-align: center;
+        }
     }
 
     &__category {
-        --columns: 18;
-        grid-column: 4 / span var(--columns);
+        display: block;
         border-top: 1px solid $color-tertiary;
-        padding-top: 48px;
+        padding-top: 32px;
+
+        @include bp (sm) {
+            display: grid;
+            --columns: 18;
+            grid-column: 4 / span var(--columns);
+            padding-top: 48px;
+        }
 
         h2 {
-            grid-column: 1 / span 8;
+            font-size: rem(24px);
+            line-height: 1;
+
+            @include bp (sm) {
+                grid-column: 1 / span 8;
+                font-size: rem(28px);
+            }
         }
-        ul {
-            grid-column: 11 / span 8;
-            margin-bottom: 72px;
-        }
-        li {
-            display: block;
+
+        & > ul {
+            margin: 24px 0 56px;
+
+            @include bp (sm) {
+                grid-column: 11 / span 8;
+                margin: 0 0 72px 0;
+                padding: 0;
+                font-size: rem(28px);
+            }
+
+            & > li {
+                display: block;
+                margin-bottom: 32px;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
         }
+
         a {
             color: $color-tertiary;
             text-decoration: none;
             transition: color 0.2s;
         }
         h3 {
-            font-size: rem(28px);
+            font-size: rem(24px);
             font-family: $font-serif;
-        }
 
-        dl {
-            margin-bottom: 32px;
+            @include bp (sm) {
+                font-size: rem(28px);
+            }
         }
         dt {
+            line-height: 1;
+
             a:hover {
                 color: $color-secondary;
             }
         }
         dd {
             margin-top: 6px;
-            font-size: rem(16px);
+            font-size: rem(14px);
+
+            @include bp (sm) {
+                font-size: rem(16px);
+            }
 
             &, a {
                 color: rgba($color-tertiary, 0.6);