Support project previews

3 files changed, 23 insertions, 9 deletions

diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss
index cbc4388..7c8ad8c 100644
--- a/assets/css/layouts/_card-grid.scss
+++ b/assets/css/layouts/_card-grid.scss
@@ -1,13 +1,17 @@
 @include namespace('card-grid') {
     @include store((
         --dims: (
-            --card-width: 17em
+            --col-width: 17em
         )
     ));
 
     @include layout(namespace()) {
         display:               grid;
-        grid-template-columns: repeat(auto-fit, minmax(#{prop(--dims --card-width)}, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
         gap:                   .6rem;
+
+        @include media('<=sm') {
+            grid-template-columns: 1fr;
+        }
     }
 }
diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss
new file mode 100644
index 0000000..df2952b
--- /dev/null
+++ b/assets/css/layouts/_project-grid.scss
@@ -0,0 +1,17 @@
+@include namespace('project-grid') {
+    @include store((
+        --dims: (
+            --col-width: 26em
+        )
+    ));
+
+    @include layout(namespace()) {
+        display:               grid;
+        grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr));
+        gap:                   1rem;
+
+        @include media('<=sm') {
+            grid-template-columns: 1fr;
+        }
+    }
+}
diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss
index 70ace4c..51e3dc8 100644
--- a/assets/css/layouts/_section.scss
+++ b/assets/css/layouts/_section.scss
@@ -25,7 +25,6 @@
             left:           0;
             flex-direction: row;
             justify-self:   flex-start;
-            padding-right:  prop(--dims --outer, $global: true);
             font-size:      1 / 16 * 15em;
 
             &::after {
@@ -38,11 +37,5 @@
                 border-top:   1px solid prop(--colors --border);
             }
         }
-
-        @include media('<=sm') {
-            @include element('head') {
-                padding-right: 0;
-            }
-        }
     }
 }