init

mixin/_breakpoint.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+@mixin breakpoint($media, $min: 0, $max: 0) {
+  $bpMin: map.get($breakpoints, $min);
+  $bpMax: map.get($breakpoints, $max);
+
+  @if $bpMax != 0 {
+    @media only #{$media} and (min-width: $bpMin) and (max-width: $bpMax) {
+      @content;
+    }
+  } @else {
+    @media only #{$media} and (min-width: $bpMin) {
+      @content;
+    }
+  }
+}

mixin/_card.scss

@@ -0,0 +1,36 @@
+@use 'sass:list';
+
+/*
+  @include card([
+    (0 "full" (0 0) (0 0)))
+  ]);
+
+  @include card([
+    ($bpMinWidth $bpMaxWidth (width height) (margWidth margHeight)
+  ]);
+*/
+@mixin card($cardBpColumns: []) {
+  display: inline-block;
+
+  @if list.length($cardBpColumns) > 0 {
+    @for $cardBpIndex from 1 through list.length($cardBpColumns) {
+      $bp: list.nth($cardBpColumns, $cardBpIndex);
+      @include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) {
+        $size: list.nth($bp, 3);
+        width: list.nth($size, 1);
+        @if list.length($size) == 2 {
+          height: list.nth($size, 2);
+        }
+        @if list.length($bp) == 4 {
+          $margin: list.nth($bp, 4);
+          margin-top: list.nth($margin, 1);
+          margin-bottom: list.nth($margin, 1);
+          @if list.length($margin) == 2 {
+            margin-left: list.nth($margin, 2);
+            margin-right: list.nth($margin, 2);
+          }
+        }
+      }
+    }
+  }
+}

mixin/_layout.scss

@@ -0,0 +1,67 @@
+@use 'sass:list';
+@use 'sass:math';
+
+/*
+  @include layout(column, [
+    (0 "full" ((0 0) (0 0) (1 1) (0 0)))
+  ]);
+
+  @include layout($flex-direction, [
+    ($bpMinWidth $bpMaxWidth ((flex:), ...)))
+  ]);
+*/
+@mixin layout($direction, $bpColumns: [], $gap: (0 0)) {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: $direction;
+  align-items: stretch;
+  align-content: stretch;
+  flex-wrap: wrap;
+  column-gap: list.nth($gap, 1);
+  row-gap: list.nth($gap, 2);
+
+  @if list.length($bpColumns) > 0 {
+    @for $bpIndex from 1 through list.length($bpColumns) {
+      $bp: list.nth($bpColumns, $bpIndex);
+      @include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) {
+        $columns: list.nth($bp, 3);
+        @for $i from 1 through list.length($columns) {
+          $minmax: list.nth($columns, $i);
+          $min: list.nth($minmax, 1);
+          $max: list.nth($minmax, 2);
+          & > *:nth-child(#{$i}) {
+            @if math.unit($min) == "" and math.unit($max) == "" {
+              flex: $max $min min-content;
+            } @else if math.unit($min) == "" {
+              flex: 1 $min auto;
+            } @else if math.unit($max) == "" {
+              flex: $max 0 auto;
+            } @else {
+              flex: 1 0 auto;
+            }
+
+            @if math.unit($min) != "" {
+              @if $direction == 'row' {
+                min-width: $min;
+              } @else {
+                min-height: $min;
+              }
+            }
+
+            @if math.unit($max) != "" {
+              @if $direction == 'row' {
+                max-width: $max;
+              } @else {
+                max-height: $max;
+              }
+            }
+          }
+        }
+      }
+    }
+  } @else {
+    & > * {
+      flex: 1 0 auto;
+    }
+  }
+}