refactor(sticky-columns-layout): initial responsiveness and breakpoints

src/layouts/StickySideColumns.module.scss

@@ -3,9 +3,26 @@
 
 .container {
   display: grid;
+
+  @media only screen and (max-width: 767px) {
+    gap: 20px;
+    grid-auto-flow: column;
+    grid-auto-columns: 100%;
+
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+
+    scroll-snap-type: inline mandatory;
+
+    > * {
+      scroll-snap-align: start;
+    }
+  }
+
+  @media only screen and (min-width: 768px) {
     grid-template-columns: 0.75fr 1.5fr 0.75fr;
-  grid-gap: 30px;
-  flex-grow: 1;
+    gap: 30px;
+  }
 }
 
 .sidesWrap {
@@ -16,8 +33,10 @@
 }
 
 .sides {
+  @media only screen and (min-width: 768px) {
     position: sticky;
     top: $header-height + $body-vertical-padding;
+  }
 }
 
 .files {
@@ -29,4 +48,9 @@
   padding: 10px;
   border: 10px solid $overlay-background-color;
   border-radius: 4px;
+
+  @media only screen and (max-width: 767px) {
+    max-height: calc(100svh - $header-height + $body-vertical-padding * 2);
+    overflow-y: auto;
+  }
 }

src/pages/create/style.module.scss

@@ -135,11 +135,11 @@
   grid-template-columns: 1fr;
 
   @container (min-width: 204px) {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: repeat(2, 1fr);
   }
 
   @container (min-width: 309px) {
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(3, 1fr);
   }
 
   gap: 15px;