Add responsive layout for pagination controls

src/styles/sidebar/components/PaginationNavigation.scss

 @use '../../mixins/buttons';
 @use "../../mixins/layout";
+@use "../../mixins/responsive";
 @use "../../mixins/utils";
 @use "../../variables" as var;
 
 .PaginationNavigation {
   @include utils.font--large;
 
-  // Lay out page navigation buttons horizontally as:
-  // | prevPage  |       numberedPages          | nextPage
-  //
-  // e.g.
-  // | [<- prev] | [2] ... [5] [6] [7] ... [10] | [next ->] |
   display: grid;
-  grid-template-columns: 8em auto 8em;
   align-items: center;
-  grid-template-areas: 'prevPage numberedPages nextPage';
+  grid-template-areas: 'prevPage nextPage';
 
   &__prev {
     grid-area: prevPage;
@@ -26,8 +21,9 @@
   }
 
   &__pages {
-    grid-area: numberedPages;
-    @include layout.row($justify: center, $align: center);
+    // On narrower viewports, there isn't enough room to display all of
+    // the numbered page buttons; fall back to just prev and next options
+    display: none;
   }
 
   &__button,
@@ -54,4 +50,21 @@
     }
     padding-right: var.$layout-space--xxsmall;
   }
+
+  @include responsive.wide-handheld-and-up {
+    // Where there's enough horizontal space,
+    // lay out page navigation buttons horizontally as:
+    // | prevPage  |       numberedPages          | nextPage
+    //
+    // e.g.
+    // | [<- prev] | [2] ... [5] [6] [7] ... [10] | [next ->] |
+    grid-template-columns: 8em auto 8em;
+    grid-template-areas: 'prevPage numberedPages nextPage';
+
+    &__pages {
+      display: block;
+      grid-area: numberedPages;
+      @include layout.row($justify: center, $align: center);
+    }
+  }
 }