feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Grids/Scrollable/scrollableGrid.module.css

@@ -0,0 +1,38 @@
+.carousel {
+  display: grid;
+  grid-auto-columns: 350px;
+  grid-auto-flow: column;
+  gap: var(--Spacing-x2);
+  margin-left: calc(0 - var(--Spacing-x2));
+  margin-right: calc(0 - var(--Spacing-x2));
+  overflow-x: scroll;
+  scroll-padding-left: var(--Spacing-x2);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  /* Hide scrollbar IE and Edge */
+  -ms-overflow-style: none;
+  /* Hide Scrollbar Firefox */
+}
+
+.carousel > * {
+  scroll-snap-align: start;
+}
+
+/* Hide Scrollbar Chrome, Safari and Opera */
+.carousel::-webkit-scrollbar {
+  display: none;
+}
+
+/* 3 cols + 2 gaps (+ padding) before falling back to scroll */
+@media screen and (min-width: 964px) {
+  .carousel {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .carousel {
+    margin: 0;
+    padding: 0;
+  }
+}