Replace navbar styles with utility classes. Move pages styles to components. Adjust spacing class names.

assets/sass/components/pager/_pager.scss

@@ -0,0 +1,32 @@
+// Pager
+//
+// Paged navigation is a list of page numbers when more than 1 page of content
+// is available.
+
+.pagination,
+.pager,
+%pager {
+  @extend %flex-inline;
+  @extend %link-nav;
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+  justify-content: center;
+
+  .page-item {
+  }
+
+  &__item,
+  .page-link {
+    padding-inline: 2px;
+  }
+
+  .active {
+    font-weight: var(--fw-bold);
+  }
+
+  .disabled {
+    .page-link {
+      @extend %disabled;
+    }
+  }
+}

assets/sass/components/spacing/_spacing.scss

@@ -1,13 +1,13 @@
 @each $name, $space in $spacing {
-  .mt--#{$name} {
+  .mt-#{$name} {
     @include margin-block-start($space);
   }
 
-  .mb--#{$name} {
+  .mb-#{$name} {
     @include margin-block-end($space);
   }
 
-  .mtb--#{$name} {
+  .mx-#{$name} {
     @include margin-block($space);
   }
 }

assets/sass/navigation/navbar/_navbar.scss

@@ -1,6 +0,0 @@
-// Navbar
-
-.navbar {
-  @extend %flex-inline;
-  margin-block: 0;
-}

assets/sass/styles.scss

@@ -53,17 +53,13 @@
 @import 'components/list-straight-left/list-straight-left';
 @import 'components/messages/messages';
 @import 'components/meta/meta';
+@import 'components/pager/pager';
 @import 'components/responsive-video/responsive-video';
 @import 'components/spacing/spacing';
 @import 'components/tables/tables';
 @import 'components/tags/tags';
 @import 'components/visually-hidden/visually-hidden';
 
-// Navigation
-
-@import 'navigation/navbar/navbar';
-@import 'navigation/pager/pager';
-
 // Zen styles
 
 @import 'zen';