fixed card sizes and update Library views

src/pages/library/LibraryList.vue

@@ -77,39 +77,57 @@ export default {
 .library-list {
   overflow-y: auto;
   height: 100%;
+  padding: 0 1.15rem;
+
+  @include media-breakpoint-up($size-bp) {
+    padding: 0 2.15rem;
+  }
 
   h3 {
     font-family: $font-family-text;
     line-height: 1;
-    font-size: 16.5rem;
+    font-size: 6.25rem;
+    margin-top: 2rem;
+
+    @include media-breakpoint-up($size-bp) {
+      margin-top: 2rem;
+      font-size: 16.5rem;
+    }
   }
 
   &-nodes-group {
-    display: flex;
-    flex-wrap: wrap;
+    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 {
-      margin-bottom: 3.4375rem;
-      $marg: 4.6875rem;
-      width: 100%;
-      height: $node-card-height;
+      max-width: 100%;
+      height: $node-card-height-sm;
 
-      @include media-breakpoint-only(md) {
-        max-width: calc(50% - #{($marg / 2)});
-        margin-right: $marg;
-
-        &:nth-of-type(2n) {
-          margin-right: 0;
-        }
+      @include media-breakpoint-up($size-bp) {
+        max-width: $node-card-width;
+        height: $node-card-height;
       }
 
-      @include media-breakpoint-up(lg) {
-        margin-right: $marg;
-        max-width: calc(33.33% - #{(($marg * 2) / 3)});
-
-        &:nth-of-type(3n) {
-          margin-right: 0;
-        }
+      &.preview {
+        top: -2rem;
       }
     }
   }