init

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);
+          }
+        }
+      }
+    }
+  }
+}