add node-grid class

src/assets/scss/app.scss

@@ -5,6 +5,7 @@
 @import 'base/root';
 
 @import 'base/bootstrap-overrides';
+@import 'classes/nodes-grid';
 @import 'classes/misc';
 
 @import 'fonts/noto-sans';

src/assets/scss/classes/_nodes-grid.scss

@@ -0,0 +1,22 @@
+.nodes-grid {
+  display: grid;
+  grid-gap: 2.2rem;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+
+  @include media-breakpoint-up(lg) {
+    grid-gap: 3.4rem;
+  }
+
+  @media (min-width: 650px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @include media-breakpoint-up(xxl) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

src/pages/library/LibraryList.vue

@@ -7,7 +7,7 @@
             {{ char }}
           </h3>
 
-          <div class="library-list-nodes-group">
+          <div class="library-list-nodes-group nodes-grid">
             <node-view
               v-for="node in nodes" :key="char + '-' + node.id"
               :node="node"
@@ -106,27 +106,6 @@ export default {
   }
 
   &-nodes-group {
-    display: grid;
-    grid-gap: 2.2rem;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-
-    @include media-breakpoint-up(lg) {
-      grid-gap: 3.4rem;
-    }
-
-    @media (min-width: 650px) {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    @include media-breakpoint-up(lg) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-
-    @include media-breakpoint-up(xxl) {
-      grid-template-columns: repeat(4, 1fr);
-    }
-
     .node-view {
       max-width: 100%;
       height: $node-card-height-sm;