refactor(styles): use compose to declare grid layouts once

I'm using same grid layouts in multiple places. To avoid maintenance
issue, I think it is better to declare the grid once and to import its
declaration where it is needed. Thanks to CSS modules, I can use
compose to do that.

1 files changed, 27 insertions, 0 deletions

diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss
new file mode 100644
index 0000000..9efea72
--- /dev/null
+++ b/src/styles/layout/_grid.scss
@@ -0,0 +1,27 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.grid {
+  --grid-gap: var(--spacing-md);
+
+  display: grid;
+  align-items: center;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    var(--column-3, minmax(0, 1fr));
+  column-gap: var(--grid-gap);
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      --grid-gap: var(--spacing-lg);
+      grid-template-columns:
+        minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
+        var(--column-3, minmax(0, 3fr));
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(50ch, 50vw, 80ch)
+        var(--column-3, minmax(0, 1fr));
+    }
+  }
+}