fix

lib/_defaults.scss

@@ -2,6 +2,14 @@
   box-sizing: border-box;
 }
 
+.layout-row {
+  @include layout(row);
+}
+
+.layout-column {
+  @include layout(column);
+}
+
 html {
   height: 100vh;
 }
@@ -14,10 +22,7 @@ body {
   height: 100vh;
 }
 
-.section {
+.container {
-  flex: 0 0 auto;
-
-  & > .container {
   margin: 0 auto;
   width: 100%;
 
@@ -27,5 +32,4 @@ body {
   @include breakpoint('screen', 'l') { max-width: 90vw; }
   @include breakpoint('screen', 'xl') { max-width: rem(1400); }
   @include breakpoint('screen', 'xxl') { max-width: rem(1600); }
-  }
 }

lib/_theme.scss

@@ -1,3 +1,4 @@
 body {
   background-color: var(--bg-color);
+  color: var(--fg-color);
 }

mixin/_layout.scss

@@ -3,12 +3,20 @@
 
 /*
   @include layout(column, [
-    ("m" "full" ((0 0) (0 0) (1 1) (0 0)))
+    ("m" "full" (
-  ]);
+      ((0 0) (0 0) (1 1) (0 0)) (0 50%)
+    ),
+    (0 "m" (
+      ((0 0)) (100% 100%)
+    )
+  ], (1rem 1rem));
 
   @include layout($flex-direction, [
-    ($bpMinWidth $bpMaxWidth ((flex:), ...)))
+    ($bpMinWidth $bpMaxWidth (
-  ]);
+      ((flex:), ...))
+      ((minmax:))
+    )
+  ], (gapRow gapColumn);
 */
 @mixin layout($direction, $bpColumns: [], $gap: (0 0)) {
   display: flex;
@@ -27,16 +35,38 @@
   row-gap: $rowGap;
 
   & > * {
-    flex: 1 0 auto;
+    flex: 0 0 auto;
   }
 
   @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) {
 
+        @if list.length($bp) >= 3 {
+          $flex: list.nth($bp, 3);
+          @for $i from 1 through list.length($flex) {
+            $flexGrowShrink: list.nth($flex, $i);
+            $grow: 0;
+            $shrink: 0;
+            @if list.length($flexGrowShrink) >= 1 {
+              $grow: list.nth($flexGrowShrink, 1);
+            }
+            @if list.length($flexGrowShrink) == 2 {
+              $shrink: list.nth($flexGrowShrink, 2);
+            }
+            $length: list.length($flex);
+            $childs: $length + 'n+' + $i;
+
+            & > *:nth-child(#{$childs}) {
+              flex: $grow $shrink auto;
+            }
+          }
+        }
+
+        @if list.length($bp) == 4 {
+          $columns: list.nth($bp, 4);
+          @for $i from 1 through list.length($columns) {
             $minmax: list.nth($columns, $i);
             $min: list.nth($minmax, 1);
             $max: $min;
@@ -49,12 +79,12 @@
             @if math.unit($min) != "" {
               @if $direction == 'row' {
                 @if $rowGap > 0 {
-                $min: calc(#{$min} - #{math.div($rowGap, list.length($columns) - 1)});
+                  $min: calc(#{$min} - (#{$rowGap} / #{$length}));
                 }
               }
               @if $direction == 'column' {
                 @if $columnGap > 0 {
-                $min: calc(#{$min} - #{math.div($columnGap, list.length($columns) - 1)});
+                  $min: calc(#{$min} - (#{$columnGap} / #{$length}));
                 }
               }
             }
@@ -62,18 +92,17 @@
             @if math.unit($max) != "" {
               @if $direction == 'row' {
                 @if $rowGap > 0 {
-                $max: calc(#{$max} - #{math.div($rowGap, list.length($columns) - 1)});
+                  $max: calc(#{$max} - (#{$rowGap} / #{$length}));
                 }
               }
               @if $direction == 'column' {
                 @if $columnGap > 0 {
-                $max: calc(#{$max} - #{math.div($columnGap, list.length($columns) - 1)});
+                  $max: calc(#{$max} - (#{$columnGap} / #{$length}));
                 }
               }
             }
 
             & > *:nth-child(#{$childs}) {
-            flex: $max $min auto;
               @if $direction == 'row' and $min != 0 {
                 min-width: $min;
               } @else if $min > 0 {
@@ -89,4 +118,5 @@
         }
       }
     }
+  }
 }

theme/sumedia/_theme.scss

@@ -1,28 +1,33 @@
 :root {
   --primary-color: #333;
   --primary-color-ligher: #444;
+  --primary-color-lighest: #555;
   --primary-color-darker: #252525;
+  --primary-color-darkest: #111;
   --secondary-color: #da0;
-  --secondary-color-lighter: #db0;
+  --secondary-color-lighter: #c90;
-  --secondary-color-darker: #c90;
+  --secondary-color-lightest: #fc0;
+  --secondary-color-darker: #960;
+  --secondary-color-darkest: #860;
   --tertiary-color: #460;
   --tertiary-color-ligher: #680;
+  --tertiary-color-lighest: #8a0;
   --tertiary-color-darker: #340;
+  --tertiary-color-darkest: #230;
   --quarternary-color: #146;
   --quarternary-color-lighter: #257;
+  --quarternary-color-lightest: #2368;
   --quarternary-color-darker: #035;
-  --bg-color: #fff;
+  --quarternary-color-darkest: #024;
-  --bg-color-inverted: #333;
+  --bg-color: #222;
-  --fg-color: #222;
+  --bg-color-inverted: #ccc;
-  --fg-color-inverted: #f5f5f5;
+  --fg-color: #f0f0f0;
-  --link-color: #246;
+  --fg-color-inverted: #212121;
-  --link-color-inverted: #da0;
+  --link-color: #da0;
-  --border-color: #222;
+  --link-color-inverted: #246;
-  --border-color-inverted: #ccc;
+  --border-color: #111;
+  --border-color-inverted: #aaa;
   --shadow-color: #333;
-  --primary-font: $primaryFont;
-  --heading-font: $headingFont;
-  --icon-font: $iconFont;
 }
 
 @media (prefers-color-scheme: dark) {

theme/vineae/_theme.scss

@@ -1,16 +1,24 @@
 :root {
   --primary-color: #333;
   --primary-color-ligher: #444;
+  --primary-color-lighest: #555;
   --primary-color-darker: #252525;
+  --primary-color-darkest: #111;
   --secondary-color: #da0;
   --secondary-color-lighter: #c90;
+  --secondary-color-lightest: #fc0;
   --secondary-color-darker: #960;
+  --secondary-color-darkest: #860;
   --tertiary-color: #460;
   --tertiary-color-ligher: #680;
+  --tertiary-color-lighest: #8a0;
   --tertiary-color-darker: #340;
+  --tertiary-color-darkest: #230;
   --quarternary-color: #146;
   --quarternary-color-lighter: #257;
+  --quarternary-color-lightest: #2368;
   --quarternary-color-darker: #035;
+  --quarternary-color-darkest: #024;
   --bg-color: #222;
   --bg-color-inverted: #ccc;
   --fg-color: #f0f0f0;
@@ -20,9 +28,6 @@
   --border-color: #111;
   --border-color-inverted: #aaa;
   --shadow-color: #333;
-    --primary-font: $primaryFont;
-    --heading-font: $headingFont;
-    --icon-font: $iconFont;
 }
 
 @media (prefers-color-scheme: dark) {