@itcase/ui 1.8.159 → 1.8.160

package/dist/css/components/Grid/Grid.css

@@ -37,148 +37,2249 @@
   }
 }
 .grid {
-  @each $val in auto, normal, stretch, center, start, end, space-around,
-    space-between, space-evenly, safe center, unsafe center, self-start,
-    self-end, first, baseline, first, baseline, last baseline {
-    &_align-content_$(val) {
-      align-content: $(val);
+    &_align-content_auto {
+      align-content: auto;
     }
-    &_align-items_$(val) {
-      align-items: $(val);
+    &_align-items_auto {
+      align-items: auto;
+    }
+    &_align-content_normal {
+      align-content: normal;
+    }
+    &_align-items_normal {
+      align-items: normal;
+    }
+    &_align-content_stretch {
+      align-content: stretch;
+    }
+    &_align-items_stretch {
+      align-items: stretch;
+    }
+    &_align-content_center {
+      align-content: center;
+    }
+    &_align-items_center {
+      align-items: center;
+    }
+    &_align-content_start {
+      align-content: start;
+    }
+    &_align-items_start {
+      align-items: start;
+    }
+    &_align-content_end {
+      align-content: end;
+    }
+    &_align-items_end {
+      align-items: end;
+    }
+    &_align-content_space-around {
+      align-content: space-around;
+    }
+    &_align-items_space-around {
+      align-items: space-around;
+    }
+    &_align-content_space-between {
+      align-content: space-between;
+    }
+    &_align-items_space-between {
+      align-items: space-between;
+    }
+    &_align-content_space-evenly {
+      align-content: space-evenly;
+    }
+    &_align-items_space-evenly {
+      align-items: space-evenly;
+    }
+    &_align-content_safe center {
+      align-content: safe center;
+    }
+    &_align-items_safe center {
+      align-items: safe center;
+    }
+    &_align-content_unsafe center {
+      align-content: unsafe center;
+    }
+    &_align-items_unsafe center {
+      align-items: unsafe center;
+    }
+    &_align-content_self-start {
+      align-content: self-start;
+    }
+    &_align-items_self-start {
+      align-items: self-start;
+    }
+    &_align-content_self-end {
+      align-content: self-end;
+    }
+    &_align-items_self-end {
+      align-items: self-end;
+    }
+    &_align-content_first {
+      align-content: first;
+    }
+    &_align-items_first {
+      align-items: first;
+    }
+    &_align-content_baseline {
+      align-content: baseline;
+    }
+    &_align-items_baseline {
+      align-items: baseline;
+    }
+    &_align-content_first {
+      align-content: first;
+    }
+    &_align-items_first {
+      align-items: first;
+    }
+    &_align-content_baseline {
+      align-content: baseline;
+    }
+    &_align-items_baseline {
+      align-items: baseline;
+    }
+    &_align-content_last baseline {
+      align-content: last baseline;
+    }
+    &_align-items_last baseline {
+      align-items: last baseline;
     }
-  }
 }
 .grid {
-  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
-    19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
-    38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
-    57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
-    76, 77, 78, 79, 80 {
-    &_columns_$(val) {
-      grid-template-columns: repeat($(val), 1fr);
+    &_columns_1 {
+      grid-template-columns: repeat(1, 1fr);
       & > ^&__wrapper {
         & > div {
-          grid-template-columns: repeat($(val), 1fr);
+          grid-template-columns: repeat(1, 1fr);
         }
       }
     }
-  }
-}
-.grid {
-  @each $val in auto, legacy, normal, stretch, center, start, end, left, right,
-    space-around, space-between, space-evenly, safe, center, unsafe center,
-    self-start, self-end, left, right, baseline, first baseline, last baseline {
-    &_justify-content_$(val) {
-      justify-content: $(val);
+    &_columns_2 {
+      grid-template-columns: repeat(2, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
     }
-    &_justify-items_$(val) {
-      justify-items: $(val);
+    &_columns_3 {
+      grid-template-columns: repeat(3, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
     }
-  }
-}
-.grid {
-  @each $val in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
-    19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37,
-    38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56,
-    57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,
-    76, 77, 78, 79, 80 {
-    &_rows_$(val) {
-      grid-template-columns: repeat($(val), 1fr);
+    &_columns_4 {
+      grid-template-columns: repeat(4, 1fr);
       & > ^&__wrapper {
         & > div {
-          grid-template-columns: repeat($(val), 1fr);
+          grid-template-columns: repeat(4, 1fr);
         }
       }
     }
-  }
-}
-.grid {
-  &_scroll_horizontal {
-    min-width: 100%;
-    overflow-x: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--color-accent-secondary) var(--color-surface-tertiary);
-  }
-}
-.grid {
-  &_shape {
-    &_rounded {
-      border-radius: var(--grid-shape-rounded);
+    &_columns_5 {
+      grid-template-columns: repeat(5, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(5, 1fr);
+        }
+      }
     }
-  }
-}
-.grid {
-  &&_vertical-resizing {
-    &_fill {
+    &_columns_6 {
+      grid-template-columns: repeat(6, 1fr);
       & > ^&__wrapper {
-        height: 100%;
         & > div {
-          height: 100%;
+          grid-template-columns: repeat(6, 1fr);
         }
       }
     }
-  }
-}
-.grid {
-  &__item {
-    transition: var(--grid-item-transition);
-  }
-}
-.grid {
-  &__item {
-    @each $val in auto, normal, stretch, center, start, end, space-around, space-between, space-evenly, safe center, unsafe center, self-start, self-end, first, baseline, first, baseline, last baseline {
-      &_align-self_$(val) {
-        align-self: $(val);
+    &_columns_7 {
+      grid-template-columns: repeat(7, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(7, 1fr);
+        }
       }
     }
-  }
-}
-.grid {
-  &__item {
-    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
-      18, 19, 20, 21, 22, 23, 24 {
-      &_column {
-        &-start_$(val) {
-          grid-column-start: $(val);
+    &_columns_8 {
+      grid-template-columns: repeat(8, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(8, 1fr);
+        }
+      }
+    }
+    &_columns_9 {
+      grid-template-columns: repeat(9, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(9, 1fr);
         }
-        &-end_$(val) {
-          grid-column-end: $(val);
+      }
+    }
+    &_columns_10 {
+      grid-template-columns: repeat(10, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(10, 1fr);
         }
-        &-span_$(val) {
-          grid-column-end: span $(val);
+      }
+    }
+    &_columns_11 {
+      grid-template-columns: repeat(11, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(11, 1fr);
         }
       }
     }
-  }
-}
-.grid {
-  &__item {
-    @each $val in auto, legacy, normal, stretch, center, start, end, left,
-      right, space-around, space-between, space-evenly, safe, center,
-      unsafe center, self-start, self-end, left, right, baseline,
-      first baseline, last baseline {
-      &_justify-self_$(val) {
-        justify-self: $(val);
+    &_columns_12 {
+      grid-template-columns: repeat(12, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(12, 1fr);
+        }
       }
     }
-  }
-}
-.grid {
-  &__item {
-    @each $val in -1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
-      18, 19, 20, 21, 22, 23, 24 {
-      &_row {
-        &-start_$(val) {
-          grid-row-start: $(val);
+    &_columns_13 {
+      grid-template-columns: repeat(13, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(13, 1fr);
+        }
+      }
+    }
+    &_columns_14 {
+      grid-template-columns: repeat(14, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(14, 1fr);
+        }
+      }
+    }
+    &_columns_15 {
+      grid-template-columns: repeat(15, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(15, 1fr);
+        }
+      }
+    }
+    &_columns_16 {
+      grid-template-columns: repeat(16, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(16, 1fr);
+        }
+      }
+    }
+    &_columns_17 {
+      grid-template-columns: repeat(17, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(17, 1fr);
+        }
+      }
+    }
+    &_columns_18 {
+      grid-template-columns: repeat(18, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(18, 1fr);
+        }
+      }
+    }
+    &_columns_19 {
+      grid-template-columns: repeat(19, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(19, 1fr);
+        }
+      }
+    }
+    &_columns_20 {
+      grid-template-columns: repeat(20, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(20, 1fr);
+        }
+      }
+    }
+    &_columns_21 {
+      grid-template-columns: repeat(21, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(21, 1fr);
+        }
+      }
+    }
+    &_columns_22 {
+      grid-template-columns: repeat(22, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(22, 1fr);
+        }
+      }
+    }
+    &_columns_23 {
+      grid-template-columns: repeat(23, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(23, 1fr);
+        }
+      }
+    }
+    &_columns_24 {
+      grid-template-columns: repeat(24, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(24, 1fr);
+        }
+      }
+    }
+    &_columns_25 {
+      grid-template-columns: repeat(25, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(25, 1fr);
+        }
+      }
+    }
+    &_columns_26 {
+      grid-template-columns: repeat(26, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(26, 1fr);
+        }
+      }
+    }
+    &_columns_27 {
+      grid-template-columns: repeat(27, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(27, 1fr);
+        }
+      }
+    }
+    &_columns_28 {
+      grid-template-columns: repeat(28, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(28, 1fr);
+        }
+      }
+    }
+    &_columns_29 {
+      grid-template-columns: repeat(29, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(29, 1fr);
+        }
+      }
+    }
+    &_columns_30 {
+      grid-template-columns: repeat(30, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(30, 1fr);
+        }
+      }
+    }
+    &_columns_31 {
+      grid-template-columns: repeat(31, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(31, 1fr);
+        }
+      }
+    }
+    &_columns_32 {
+      grid-template-columns: repeat(32, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(32, 1fr);
+        }
+      }
+    }
+    &_columns_33 {
+      grid-template-columns: repeat(33, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(33, 1fr);
+        }
+      }
+    }
+    &_columns_34 {
+      grid-template-columns: repeat(34, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(34, 1fr);
+        }
+      }
+    }
+    &_columns_35 {
+      grid-template-columns: repeat(35, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(35, 1fr);
+        }
+      }
+    }
+    &_columns_36 {
+      grid-template-columns: repeat(36, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(36, 1fr);
+        }
+      }
+    }
+    &_columns_37 {
+      grid-template-columns: repeat(37, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(37, 1fr);
         }
-        &-end_$(val) {
-          grid-row-end: $(val);
+      }
+    }
+    &_columns_38 {
+      grid-template-columns: repeat(38, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(38, 1fr);
+        }
+      }
+    }
+    &_columns_39 {
+      grid-template-columns: repeat(39, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(39, 1fr);
         }
-        &-span_$(val) {
-          grid-row-end: span $(val);
+      }
+    }
+    &_columns_40 {
+      grid-template-columns: repeat(40, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(40, 1fr);
         }
       }
     }
+    &_columns_41 {
+      grid-template-columns: repeat(41, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(41, 1fr);
+        }
+      }
+    }
+    &_columns_42 {
+      grid-template-columns: repeat(42, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(42, 1fr);
+        }
+      }
+    }
+    &_columns_43 {
+      grid-template-columns: repeat(43, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(43, 1fr);
+        }
+      }
+    }
+    &_columns_44 {
+      grid-template-columns: repeat(44, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(44, 1fr);
+        }
+      }
+    }
+    &_columns_45 {
+      grid-template-columns: repeat(45, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(45, 1fr);
+        }
+      }
+    }
+    &_columns_46 {
+      grid-template-columns: repeat(46, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(46, 1fr);
+        }
+      }
+    }
+    &_columns_47 {
+      grid-template-columns: repeat(47, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(47, 1fr);
+        }
+      }
+    }
+    &_columns_48 {
+      grid-template-columns: repeat(48, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(48, 1fr);
+        }
+      }
+    }
+    &_columns_49 {
+      grid-template-columns: repeat(49, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(49, 1fr);
+        }
+      }
+    }
+    &_columns_50 {
+      grid-template-columns: repeat(50, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(50, 1fr);
+        }
+      }
+    }
+    &_columns_51 {
+      grid-template-columns: repeat(51, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(51, 1fr);
+        }
+      }
+    }
+    &_columns_52 {
+      grid-template-columns: repeat(52, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(52, 1fr);
+        }
+      }
+    }
+    &_columns_53 {
+      grid-template-columns: repeat(53, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(53, 1fr);
+        }
+      }
+    }
+    &_columns_54 {
+      grid-template-columns: repeat(54, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(54, 1fr);
+        }
+      }
+    }
+    &_columns_55 {
+      grid-template-columns: repeat(55, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(55, 1fr);
+        }
+      }
+    }
+    &_columns_56 {
+      grid-template-columns: repeat(56, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(56, 1fr);
+        }
+      }
+    }
+    &_columns_57 {
+      grid-template-columns: repeat(57, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(57, 1fr);
+        }
+      }
+    }
+    &_columns_58 {
+      grid-template-columns: repeat(58, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(58, 1fr);
+        }
+      }
+    }
+    &_columns_59 {
+      grid-template-columns: repeat(59, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(59, 1fr);
+        }
+      }
+    }
+    &_columns_60 {
+      grid-template-columns: repeat(60, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(60, 1fr);
+        }
+      }
+    }
+    &_columns_61 {
+      grid-template-columns: repeat(61, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(61, 1fr);
+        }
+      }
+    }
+    &_columns_62 {
+      grid-template-columns: repeat(62, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(62, 1fr);
+        }
+      }
+    }
+    &_columns_63 {
+      grid-template-columns: repeat(63, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(63, 1fr);
+        }
+      }
+    }
+    &_columns_64 {
+      grid-template-columns: repeat(64, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(64, 1fr);
+        }
+      }
+    }
+    &_columns_65 {
+      grid-template-columns: repeat(65, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(65, 1fr);
+        }
+      }
+    }
+    &_columns_66 {
+      grid-template-columns: repeat(66, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(66, 1fr);
+        }
+      }
+    }
+    &_columns_67 {
+      grid-template-columns: repeat(67, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(67, 1fr);
+        }
+      }
+    }
+    &_columns_68 {
+      grid-template-columns: repeat(68, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(68, 1fr);
+        }
+      }
+    }
+    &_columns_69 {
+      grid-template-columns: repeat(69, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(69, 1fr);
+        }
+      }
+    }
+    &_columns_70 {
+      grid-template-columns: repeat(70, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(70, 1fr);
+        }
+      }
+    }
+    &_columns_71 {
+      grid-template-columns: repeat(71, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(71, 1fr);
+        }
+      }
+    }
+    &_columns_72 {
+      grid-template-columns: repeat(72, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(72, 1fr);
+        }
+      }
+    }
+    &_columns_73 {
+      grid-template-columns: repeat(73, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(73, 1fr);
+        }
+      }
+    }
+    &_columns_74 {
+      grid-template-columns: repeat(74, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(74, 1fr);
+        }
+      }
+    }
+    &_columns_75 {
+      grid-template-columns: repeat(75, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(75, 1fr);
+        }
+      }
+    }
+    &_columns_76 {
+      grid-template-columns: repeat(76, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(76, 1fr);
+        }
+      }
+    }
+    &_columns_77 {
+      grid-template-columns: repeat(77, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(77, 1fr);
+        }
+      }
+    }
+    &_columns_78 {
+      grid-template-columns: repeat(78, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(78, 1fr);
+        }
+      }
+    }
+    &_columns_79 {
+      grid-template-columns: repeat(79, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(79, 1fr);
+        }
+      }
+    }
+    &_columns_80 {
+      grid-template-columns: repeat(80, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(80, 1fr);
+        }
+      }
+    }
+}
+.grid {
+    &_justify-content_auto {
+      justify-content: auto;
+    }
+    &_justify-items_auto {
+      justify-items: auto;
+    }
+    &_justify-content_legacy {
+      justify-content: legacy;
+    }
+    &_justify-items_legacy {
+      justify-items: legacy;
+    }
+    &_justify-content_normal {
+      justify-content: normal;
+    }
+    &_justify-items_normal {
+      justify-items: normal;
+    }
+    &_justify-content_stretch {
+      justify-content: stretch;
+    }
+    &_justify-items_stretch {
+      justify-items: stretch;
+    }
+    &_justify-content_center {
+      justify-content: center;
+    }
+    &_justify-items_center {
+      justify-items: center;
+    }
+    &_justify-content_start {
+      justify-content: start;
+    }
+    &_justify-items_start {
+      justify-items: start;
+    }
+    &_justify-content_end {
+      justify-content: end;
+    }
+    &_justify-items_end {
+      justify-items: end;
+    }
+    &_justify-content_left {
+      justify-content: left;
+    }
+    &_justify-items_left {
+      justify-items: left;
+    }
+    &_justify-content_right {
+      justify-content: right;
+    }
+    &_justify-items_right {
+      justify-items: right;
+    }
+    &_justify-content_space-around {
+      justify-content: space-around;
+    }
+    &_justify-items_space-around {
+      justify-items: space-around;
+    }
+    &_justify-content_space-between {
+      justify-content: space-between;
+    }
+    &_justify-items_space-between {
+      justify-items: space-between;
+    }
+    &_justify-content_space-evenly {
+      justify-content: space-evenly;
+    }
+    &_justify-items_space-evenly {
+      justify-items: space-evenly;
+    }
+    &_justify-content_safe {
+      justify-content: safe;
+    }
+    &_justify-items_safe {
+      justify-items: safe;
+    }
+    &_justify-content_center {
+      justify-content: center;
+    }
+    &_justify-items_center {
+      justify-items: center;
+    }
+    &_justify-content_unsafe center {
+      justify-content: unsafe center;
+    }
+    &_justify-items_unsafe center {
+      justify-items: unsafe center;
+    }
+    &_justify-content_self-start {
+      justify-content: self-start;
+    }
+    &_justify-items_self-start {
+      justify-items: self-start;
+    }
+    &_justify-content_self-end {
+      justify-content: self-end;
+    }
+    &_justify-items_self-end {
+      justify-items: self-end;
+    }
+    &_justify-content_left {
+      justify-content: left;
+    }
+    &_justify-items_left {
+      justify-items: left;
+    }
+    &_justify-content_right {
+      justify-content: right;
+    }
+    &_justify-items_right {
+      justify-items: right;
+    }
+    &_justify-content_baseline {
+      justify-content: baseline;
+    }
+    &_justify-items_baseline {
+      justify-items: baseline;
+    }
+    &_justify-content_first baseline {
+      justify-content: first baseline;
+    }
+    &_justify-items_first baseline {
+      justify-items: first baseline;
+    }
+    &_justify-content_last baseline {
+      justify-content: last baseline;
+    }
+    &_justify-items_last baseline {
+      justify-items: last baseline;
+    }
+}
+.grid {
+    &_rows_1 {
+      grid-template-columns: repeat(1, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(1, 1fr);
+        }
+      }
+    }
+    &_rows_2 {
+      grid-template-columns: repeat(2, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(2, 1fr);
+        }
+      }
+    }
+    &_rows_3 {
+      grid-template-columns: repeat(3, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(3, 1fr);
+        }
+      }
+    }
+    &_rows_4 {
+      grid-template-columns: repeat(4, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(4, 1fr);
+        }
+      }
+    }
+    &_rows_5 {
+      grid-template-columns: repeat(5, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(5, 1fr);
+        }
+      }
+    }
+    &_rows_6 {
+      grid-template-columns: repeat(6, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(6, 1fr);
+        }
+      }
+    }
+    &_rows_7 {
+      grid-template-columns: repeat(7, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(7, 1fr);
+        }
+      }
+    }
+    &_rows_8 {
+      grid-template-columns: repeat(8, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(8, 1fr);
+        }
+      }
+    }
+    &_rows_9 {
+      grid-template-columns: repeat(9, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(9, 1fr);
+        }
+      }
+    }
+    &_rows_10 {
+      grid-template-columns: repeat(10, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(10, 1fr);
+        }
+      }
+    }
+    &_rows_11 {
+      grid-template-columns: repeat(11, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(11, 1fr);
+        }
+      }
+    }
+    &_rows_12 {
+      grid-template-columns: repeat(12, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(12, 1fr);
+        }
+      }
+    }
+    &_rows_13 {
+      grid-template-columns: repeat(13, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(13, 1fr);
+        }
+      }
+    }
+    &_rows_14 {
+      grid-template-columns: repeat(14, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(14, 1fr);
+        }
+      }
+    }
+    &_rows_15 {
+      grid-template-columns: repeat(15, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(15, 1fr);
+        }
+      }
+    }
+    &_rows_16 {
+      grid-template-columns: repeat(16, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(16, 1fr);
+        }
+      }
+    }
+    &_rows_17 {
+      grid-template-columns: repeat(17, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(17, 1fr);
+        }
+      }
+    }
+    &_rows_18 {
+      grid-template-columns: repeat(18, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(18, 1fr);
+        }
+      }
+    }
+    &_rows_19 {
+      grid-template-columns: repeat(19, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(19, 1fr);
+        }
+      }
+    }
+    &_rows_20 {
+      grid-template-columns: repeat(20, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(20, 1fr);
+        }
+      }
+    }
+    &_rows_21 {
+      grid-template-columns: repeat(21, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(21, 1fr);
+        }
+      }
+    }
+    &_rows_22 {
+      grid-template-columns: repeat(22, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(22, 1fr);
+        }
+      }
+    }
+    &_rows_23 {
+      grid-template-columns: repeat(23, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(23, 1fr);
+        }
+      }
+    }
+    &_rows_24 {
+      grid-template-columns: repeat(24, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(24, 1fr);
+        }
+      }
+    }
+    &_rows_25 {
+      grid-template-columns: repeat(25, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(25, 1fr);
+        }
+      }
+    }
+    &_rows_26 {
+      grid-template-columns: repeat(26, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(26, 1fr);
+        }
+      }
+    }
+    &_rows_27 {
+      grid-template-columns: repeat(27, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(27, 1fr);
+        }
+      }
+    }
+    &_rows_28 {
+      grid-template-columns: repeat(28, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(28, 1fr);
+        }
+      }
+    }
+    &_rows_29 {
+      grid-template-columns: repeat(29, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(29, 1fr);
+        }
+      }
+    }
+    &_rows_30 {
+      grid-template-columns: repeat(30, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(30, 1fr);
+        }
+      }
+    }
+    &_rows_31 {
+      grid-template-columns: repeat(31, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(31, 1fr);
+        }
+      }
+    }
+    &_rows_32 {
+      grid-template-columns: repeat(32, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(32, 1fr);
+        }
+      }
+    }
+    &_rows_33 {
+      grid-template-columns: repeat(33, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(33, 1fr);
+        }
+      }
+    }
+    &_rows_34 {
+      grid-template-columns: repeat(34, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(34, 1fr);
+        }
+      }
+    }
+    &_rows_35 {
+      grid-template-columns: repeat(35, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(35, 1fr);
+        }
+      }
+    }
+    &_rows_36 {
+      grid-template-columns: repeat(36, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(36, 1fr);
+        }
+      }
+    }
+    &_rows_37 {
+      grid-template-columns: repeat(37, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(37, 1fr);
+        }
+      }
+    }
+    &_rows_38 {
+      grid-template-columns: repeat(38, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(38, 1fr);
+        }
+      }
+    }
+    &_rows_39 {
+      grid-template-columns: repeat(39, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(39, 1fr);
+        }
+      }
+    }
+    &_rows_40 {
+      grid-template-columns: repeat(40, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(40, 1fr);
+        }
+      }
+    }
+    &_rows_41 {
+      grid-template-columns: repeat(41, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(41, 1fr);
+        }
+      }
+    }
+    &_rows_42 {
+      grid-template-columns: repeat(42, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(42, 1fr);
+        }
+      }
+    }
+    &_rows_43 {
+      grid-template-columns: repeat(43, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(43, 1fr);
+        }
+      }
+    }
+    &_rows_44 {
+      grid-template-columns: repeat(44, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(44, 1fr);
+        }
+      }
+    }
+    &_rows_45 {
+      grid-template-columns: repeat(45, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(45, 1fr);
+        }
+      }
+    }
+    &_rows_46 {
+      grid-template-columns: repeat(46, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(46, 1fr);
+        }
+      }
+    }
+    &_rows_47 {
+      grid-template-columns: repeat(47, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(47, 1fr);
+        }
+      }
+    }
+    &_rows_48 {
+      grid-template-columns: repeat(48, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(48, 1fr);
+        }
+      }
+    }
+    &_rows_49 {
+      grid-template-columns: repeat(49, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(49, 1fr);
+        }
+      }
+    }
+    &_rows_50 {
+      grid-template-columns: repeat(50, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(50, 1fr);
+        }
+      }
+    }
+    &_rows_51 {
+      grid-template-columns: repeat(51, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(51, 1fr);
+        }
+      }
+    }
+    &_rows_52 {
+      grid-template-columns: repeat(52, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(52, 1fr);
+        }
+      }
+    }
+    &_rows_53 {
+      grid-template-columns: repeat(53, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(53, 1fr);
+        }
+      }
+    }
+    &_rows_54 {
+      grid-template-columns: repeat(54, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(54, 1fr);
+        }
+      }
+    }
+    &_rows_55 {
+      grid-template-columns: repeat(55, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(55, 1fr);
+        }
+      }
+    }
+    &_rows_56 {
+      grid-template-columns: repeat(56, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(56, 1fr);
+        }
+      }
+    }
+    &_rows_57 {
+      grid-template-columns: repeat(57, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(57, 1fr);
+        }
+      }
+    }
+    &_rows_58 {
+      grid-template-columns: repeat(58, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(58, 1fr);
+        }
+      }
+    }
+    &_rows_59 {
+      grid-template-columns: repeat(59, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(59, 1fr);
+        }
+      }
+    }
+    &_rows_60 {
+      grid-template-columns: repeat(60, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(60, 1fr);
+        }
+      }
+    }
+    &_rows_61 {
+      grid-template-columns: repeat(61, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(61, 1fr);
+        }
+      }
+    }
+    &_rows_62 {
+      grid-template-columns: repeat(62, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(62, 1fr);
+        }
+      }
+    }
+    &_rows_63 {
+      grid-template-columns: repeat(63, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(63, 1fr);
+        }
+      }
+    }
+    &_rows_64 {
+      grid-template-columns: repeat(64, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(64, 1fr);
+        }
+      }
+    }
+    &_rows_65 {
+      grid-template-columns: repeat(65, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(65, 1fr);
+        }
+      }
+    }
+    &_rows_66 {
+      grid-template-columns: repeat(66, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(66, 1fr);
+        }
+      }
+    }
+    &_rows_67 {
+      grid-template-columns: repeat(67, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(67, 1fr);
+        }
+      }
+    }
+    &_rows_68 {
+      grid-template-columns: repeat(68, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(68, 1fr);
+        }
+      }
+    }
+    &_rows_69 {
+      grid-template-columns: repeat(69, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(69, 1fr);
+        }
+      }
+    }
+    &_rows_70 {
+      grid-template-columns: repeat(70, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(70, 1fr);
+        }
+      }
+    }
+    &_rows_71 {
+      grid-template-columns: repeat(71, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(71, 1fr);
+        }
+      }
+    }
+    &_rows_72 {
+      grid-template-columns: repeat(72, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(72, 1fr);
+        }
+      }
+    }
+    &_rows_73 {
+      grid-template-columns: repeat(73, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(73, 1fr);
+        }
+      }
+    }
+    &_rows_74 {
+      grid-template-columns: repeat(74, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(74, 1fr);
+        }
+      }
+    }
+    &_rows_75 {
+      grid-template-columns: repeat(75, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(75, 1fr);
+        }
+      }
+    }
+    &_rows_76 {
+      grid-template-columns: repeat(76, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(76, 1fr);
+        }
+      }
+    }
+    &_rows_77 {
+      grid-template-columns: repeat(77, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(77, 1fr);
+        }
+      }
+    }
+    &_rows_78 {
+      grid-template-columns: repeat(78, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(78, 1fr);
+        }
+      }
+    }
+    &_rows_79 {
+      grid-template-columns: repeat(79, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(79, 1fr);
+        }
+      }
+    }
+    &_rows_80 {
+      grid-template-columns: repeat(80, 1fr);
+      & > ^&__wrapper {
+        & > div {
+          grid-template-columns: repeat(80, 1fr);
+        }
+      }
+    }
+}
+.grid {
+  &_scroll_horizontal {
+    min-width: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-accent-secondary) var(--color-surface-tertiary);
+  }
+}
+.grid {
+  &_shape {
+    &_rounded {
+      border-radius: var(--grid-shape-rounded);
+    }
+  }
+}
+.grid {
+  &&_vertical-resizing {
+    &_fill {
+      & > ^&__wrapper {
+        height: 100%;
+        & > div {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+.grid {
+  &__item {
+    transition: var(--grid-item-transition);
+  }
+}
+.grid {
+  &__item {
+      &_align-self_auto {
+        align-self: auto;
+      }
+      &_align-self_normal {
+        align-self: normal;
+      }
+      &_align-self_stretch {
+        align-self: stretch;
+      }
+      &_align-self_center {
+        align-self: center;
+      }
+      &_align-self_start {
+        align-self: start;
+      }
+      &_align-self_end {
+        align-self: end;
+      }
+      &_align-self_space-around {
+        align-self: space-around;
+      }
+      &_align-self_space-between {
+        align-self: space-between;
+      }
+      &_align-self_space-evenly {
+        align-self: space-evenly;
+      }
+      &_align-self_safe center {
+        align-self: safe center;
+      }
+      &_align-self_unsafe center {
+        align-self: unsafe center;
+      }
+      &_align-self_self-start {
+        align-self: self-start;
+      }
+      &_align-self_self-end {
+        align-self: self-end;
+      }
+      &_align-self_first {
+        align-self: first;
+      }
+      &_align-self_baseline {
+        align-self: baseline;
+      }
+      &_align-self_first {
+        align-self: first;
+      }
+      &_align-self_baseline {
+        align-self: baseline;
+      }
+      &_align-self_last baseline {
+        align-self: last baseline;
+      }
+  }
+}
+.grid {
+  &__item {
+      &_column {
+        &-start_-1 {
+          grid-column-start: -1;
+        }
+        &-end_-1 {
+          grid-column-end: -1;
+        }
+        &-span_-1 {
+          grid-column-end: span -1;
+        }
+      }
+      &_column {
+        &-start_1 {
+          grid-column-start: 1;
+        }
+        &-end_1 {
+          grid-column-end: 1;
+        }
+        &-span_1 {
+          grid-column-end: span 1;
+        }
+      }
+      &_column {
+        &-start_2 {
+          grid-column-start: 2;
+        }
+        &-end_2 {
+          grid-column-end: 2;
+        }
+        &-span_2 {
+          grid-column-end: span 2;
+        }
+      }
+      &_column {
+        &-start_3 {
+          grid-column-start: 3;
+        }
+        &-end_3 {
+          grid-column-end: 3;
+        }
+        &-span_3 {
+          grid-column-end: span 3;
+        }
+      }
+      &_column {
+        &-start_4 {
+          grid-column-start: 4;
+        }
+        &-end_4 {
+          grid-column-end: 4;
+        }
+        &-span_4 {
+          grid-column-end: span 4;
+        }
+      }
+      &_column {
+        &-start_5 {
+          grid-column-start: 5;
+        }
+        &-end_5 {
+          grid-column-end: 5;
+        }
+        &-span_5 {
+          grid-column-end: span 5;
+        }
+      }
+      &_column {
+        &-start_6 {
+          grid-column-start: 6;
+        }
+        &-end_6 {
+          grid-column-end: 6;
+        }
+        &-span_6 {
+          grid-column-end: span 6;
+        }
+      }
+      &_column {
+        &-start_7 {
+          grid-column-start: 7;
+        }
+        &-end_7 {
+          grid-column-end: 7;
+        }
+        &-span_7 {
+          grid-column-end: span 7;
+        }
+      }
+      &_column {
+        &-start_8 {
+          grid-column-start: 8;
+        }
+        &-end_8 {
+          grid-column-end: 8;
+        }
+        &-span_8 {
+          grid-column-end: span 8;
+        }
+      }
+      &_column {
+        &-start_9 {
+          grid-column-start: 9;
+        }
+        &-end_9 {
+          grid-column-end: 9;
+        }
+        &-span_9 {
+          grid-column-end: span 9;
+        }
+      }
+      &_column {
+        &-start_10 {
+          grid-column-start: 10;
+        }
+        &-end_10 {
+          grid-column-end: 10;
+        }
+        &-span_10 {
+          grid-column-end: span 10;
+        }
+      }
+      &_column {
+        &-start_11 {
+          grid-column-start: 11;
+        }
+        &-end_11 {
+          grid-column-end: 11;
+        }
+        &-span_11 {
+          grid-column-end: span 11;
+        }
+      }
+      &_column {
+        &-start_12 {
+          grid-column-start: 12;
+        }
+        &-end_12 {
+          grid-column-end: 12;
+        }
+        &-span_12 {
+          grid-column-end: span 12;
+        }
+      }
+      &_column {
+        &-start_13 {
+          grid-column-start: 13;
+        }
+        &-end_13 {
+          grid-column-end: 13;
+        }
+        &-span_13 {
+          grid-column-end: span 13;
+        }
+      }
+      &_column {
+        &-start_14 {
+          grid-column-start: 14;
+        }
+        &-end_14 {
+          grid-column-end: 14;
+        }
+        &-span_14 {
+          grid-column-end: span 14;
+        }
+      }
+      &_column {
+        &-start_15 {
+          grid-column-start: 15;
+        }
+        &-end_15 {
+          grid-column-end: 15;
+        }
+        &-span_15 {
+          grid-column-end: span 15;
+        }
+      }
+      &_column {
+        &-start_16 {
+          grid-column-start: 16;
+        }
+        &-end_16 {
+          grid-column-end: 16;
+        }
+        &-span_16 {
+          grid-column-end: span 16;
+        }
+      }
+      &_column {
+        &-start_17 {
+          grid-column-start: 17;
+        }
+        &-end_17 {
+          grid-column-end: 17;
+        }
+        &-span_17 {
+          grid-column-end: span 17;
+        }
+      }
+      &_column {
+        &-start_18 {
+          grid-column-start: 18;
+        }
+        &-end_18 {
+          grid-column-end: 18;
+        }
+        &-span_18 {
+          grid-column-end: span 18;
+        }
+      }
+      &_column {
+        &-start_19 {
+          grid-column-start: 19;
+        }
+        &-end_19 {
+          grid-column-end: 19;
+        }
+        &-span_19 {
+          grid-column-end: span 19;
+        }
+      }
+      &_column {
+        &-start_20 {
+          grid-column-start: 20;
+        }
+        &-end_20 {
+          grid-column-end: 20;
+        }
+        &-span_20 {
+          grid-column-end: span 20;
+        }
+      }
+      &_column {
+        &-start_21 {
+          grid-column-start: 21;
+        }
+        &-end_21 {
+          grid-column-end: 21;
+        }
+        &-span_21 {
+          grid-column-end: span 21;
+        }
+      }
+      &_column {
+        &-start_22 {
+          grid-column-start: 22;
+        }
+        &-end_22 {
+          grid-column-end: 22;
+        }
+        &-span_22 {
+          grid-column-end: span 22;
+        }
+      }
+      &_column {
+        &-start_23 {
+          grid-column-start: 23;
+        }
+        &-end_23 {
+          grid-column-end: 23;
+        }
+        &-span_23 {
+          grid-column-end: span 23;
+        }
+      }
+      &_column {
+        &-start_24 {
+          grid-column-start: 24;
+        }
+        &-end_24 {
+          grid-column-end: 24;
+        }
+        &-span_24 {
+          grid-column-end: span 24;
+        }
+      }
+  }
+}
+.grid {
+  &__item {
+      &_justify-self_auto {
+        justify-self: auto;
+      }
+      &_justify-self_legacy {
+        justify-self: legacy;
+      }
+      &_justify-self_normal {
+        justify-self: normal;
+      }
+      &_justify-self_stretch {
+        justify-self: stretch;
+      }
+      &_justify-self_center {
+        justify-self: center;
+      }
+      &_justify-self_start {
+        justify-self: start;
+      }
+      &_justify-self_end {
+        justify-self: end;
+      }
+      &_justify-self_left {
+        justify-self: left;
+      }
+      &_justify-self_right {
+        justify-self: right;
+      }
+      &_justify-self_space-around {
+        justify-self: space-around;
+      }
+      &_justify-self_space-between {
+        justify-self: space-between;
+      }
+      &_justify-self_space-evenly {
+        justify-self: space-evenly;
+      }
+      &_justify-self_safe {
+        justify-self: safe;
+      }
+      &_justify-self_center {
+        justify-self: center;
+      }
+      &_justify-self_unsafe center {
+        justify-self: unsafe center;
+      }
+      &_justify-self_self-start {
+        justify-self: self-start;
+      }
+      &_justify-self_self-end {
+        justify-self: self-end;
+      }
+      &_justify-self_left {
+        justify-self: left;
+      }
+      &_justify-self_right {
+        justify-self: right;
+      }
+      &_justify-self_baseline {
+        justify-self: baseline;
+      }
+      &_justify-self_first baseline {
+        justify-self: first baseline;
+      }
+      &_justify-self_last baseline {
+        justify-self: last baseline;
+      }
+  }
+}
+.grid {
+  &__item {
+      &_row {
+        &-start_-1 {
+          grid-row-start: -1;
+        }
+        &-end_-1 {
+          grid-row-end: -1;
+        }
+        &-span_-1 {
+          grid-row-end: span -1;
+        }
+      }
+      &_row {
+        &-start_1 {
+          grid-row-start: 1;
+        }
+        &-end_1 {
+          grid-row-end: 1;
+        }
+        &-span_1 {
+          grid-row-end: span 1;
+        }
+      }
+      &_row {
+        &-start_2 {
+          grid-row-start: 2;
+        }
+        &-end_2 {
+          grid-row-end: 2;
+        }
+        &-span_2 {
+          grid-row-end: span 2;
+        }
+      }
+      &_row {
+        &-start_3 {
+          grid-row-start: 3;
+        }
+        &-end_3 {
+          grid-row-end: 3;
+        }
+        &-span_3 {
+          grid-row-end: span 3;
+        }
+      }
+      &_row {
+        &-start_4 {
+          grid-row-start: 4;
+        }
+        &-end_4 {
+          grid-row-end: 4;
+        }
+        &-span_4 {
+          grid-row-end: span 4;
+        }
+      }
+      &_row {
+        &-start_5 {
+          grid-row-start: 5;
+        }
+        &-end_5 {
+          grid-row-end: 5;
+        }
+        &-span_5 {
+          grid-row-end: span 5;
+        }
+      }
+      &_row {
+        &-start_6 {
+          grid-row-start: 6;
+        }
+        &-end_6 {
+          grid-row-end: 6;
+        }
+        &-span_6 {
+          grid-row-end: span 6;
+        }
+      }
+      &_row {
+        &-start_7 {
+          grid-row-start: 7;
+        }
+        &-end_7 {
+          grid-row-end: 7;
+        }
+        &-span_7 {
+          grid-row-end: span 7;
+        }
+      }
+      &_row {
+        &-start_8 {
+          grid-row-start: 8;
+        }
+        &-end_8 {
+          grid-row-end: 8;
+        }
+        &-span_8 {
+          grid-row-end: span 8;
+        }
+      }
+      &_row {
+        &-start_9 {
+          grid-row-start: 9;
+        }
+        &-end_9 {
+          grid-row-end: 9;
+        }
+        &-span_9 {
+          grid-row-end: span 9;
+        }
+      }
+      &_row {
+        &-start_10 {
+          grid-row-start: 10;
+        }
+        &-end_10 {
+          grid-row-end: 10;
+        }
+        &-span_10 {
+          grid-row-end: span 10;
+        }
+      }
+      &_row {
+        &-start_11 {
+          grid-row-start: 11;
+        }
+        &-end_11 {
+          grid-row-end: 11;
+        }
+        &-span_11 {
+          grid-row-end: span 11;
+        }
+      }
+      &_row {
+        &-start_12 {
+          grid-row-start: 12;
+        }
+        &-end_12 {
+          grid-row-end: 12;
+        }
+        &-span_12 {
+          grid-row-end: span 12;
+        }
+      }
+      &_row {
+        &-start_13 {
+          grid-row-start: 13;
+        }
+        &-end_13 {
+          grid-row-end: 13;
+        }
+        &-span_13 {
+          grid-row-end: span 13;
+        }
+      }
+      &_row {
+        &-start_14 {
+          grid-row-start: 14;
+        }
+        &-end_14 {
+          grid-row-end: 14;
+        }
+        &-span_14 {
+          grid-row-end: span 14;
+        }
+      }
+      &_row {
+        &-start_15 {
+          grid-row-start: 15;
+        }
+        &-end_15 {
+          grid-row-end: 15;
+        }
+        &-span_15 {
+          grid-row-end: span 15;
+        }
+      }
+      &_row {
+        &-start_16 {
+          grid-row-start: 16;
+        }
+        &-end_16 {
+          grid-row-end: 16;
+        }
+        &-span_16 {
+          grid-row-end: span 16;
+        }
+      }
+      &_row {
+        &-start_17 {
+          grid-row-start: 17;
+        }
+        &-end_17 {
+          grid-row-end: 17;
+        }
+        &-span_17 {
+          grid-row-end: span 17;
+        }
+      }
+      &_row {
+        &-start_18 {
+          grid-row-start: 18;
+        }
+        &-end_18 {
+          grid-row-end: 18;
+        }
+        &-span_18 {
+          grid-row-end: span 18;
+        }
+      }
+      &_row {
+        &-start_19 {
+          grid-row-start: 19;
+        }
+        &-end_19 {
+          grid-row-end: 19;
+        }
+        &-span_19 {
+          grid-row-end: span 19;
+        }
+      }
+      &_row {
+        &-start_20 {
+          grid-row-start: 20;
+        }
+        &-end_20 {
+          grid-row-end: 20;
+        }
+        &-span_20 {
+          grid-row-end: span 20;
+        }
+      }
+      &_row {
+        &-start_21 {
+          grid-row-start: 21;
+        }
+        &-end_21 {
+          grid-row-end: 21;
+        }
+        &-span_21 {
+          grid-row-end: span 21;
+        }
+      }
+      &_row {
+        &-start_22 {
+          grid-row-start: 22;
+        }
+        &-end_22 {
+          grid-row-end: 22;
+        }
+        &-span_22 {
+          grid-row-end: span 22;
+        }
+      }
+      &_row {
+        &-start_23 {
+          grid-row-start: 23;
+        }
+        &-end_23 {
+          grid-row-end: 23;
+        }
+        &-span_23 {
+          grid-row-end: span 23;
+        }
+      }
+      &_row {
+        &-start_24 {
+          grid-row-start: 24;
+        }
+        &-end_24 {
+          grid-row-end: 24;
+        }
+        &-span_24 {
+          grid-row-end: span 24;
+        }
+      }
   }
 }
 .grid {