5 files changed, 42 insertions, 10 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
index 6a2c7eb..d5f0626 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -48,9 +48,9 @@ $-font-sizes: (
 ) !default;
 
 $-aspect-ratios: (
-        '1\\/1': 1 / 1,
-        '4\\/3': 4 / 3,
-        '5\\/4': 5 / 4,
+        '1\\/1': '1 / 1',
+        '4\\/3': '4 / 3',
+        '5\\/4': '5 / 4',
 ) !default;
 
 @mixin styles {
@@ -158,6 +158,10 @@ $-aspect-ratios: (
                 align-items: flex-end;
         }
 
+        @include bem.utility('ai-stretch') {
+                align-items: stretch;
+        }
+
         @include bem.utility('ac-center') {
                 align-content: center;
         }
@@ -273,6 +277,10 @@ $-aspect-ratios: (
                 hyphenate-limit-chars: auto;
         }
 
+        @include bem.utility('tw-balance') {
+                text-wrap-style: balance;
+        }
+
         @include bem.utility('o-auto') {
                 overflow: auto;
         }
@@ -397,7 +405,7 @@ $-aspect-ratios: (
 
         @each $mod, $value in $-aspect-ratios {
                 @include bem.utility('ar-#{$mod}') {
-                        aspect-ratio: $value;
+                        aspect-ratio: string.unquote($value);
                 }
         }
 
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index e8d17ed..60a3e2b 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -21,8 +21,8 @@ $grid-xs--col-width:      props.def(--l-card-list--grid-xs--col-width, props.get
 $grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default;
 
 $grid-layouts: (
-        'grid'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    md,
-        'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap md,
+        'grid'    $grid--row-gap    $grid--col-gap    $grid--col-width    $grid--quiet--row-gap    sm,
+        'grid-sm' $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap sm,
         'grid-xs' $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap xs,
 ) !default;
 
diff --git a/src/layouts/_hlist.scss b/src/layouts/_hlist.scss
index 5c81259..06eb8dd 100644
--- a/src/layouts/_hlist.scss
+++ b/src/layouts/_hlist.scss
@@ -18,6 +18,30 @@
                 @each $mod, $size in vars.$sizes {
                         @include bem.modifier($mod) {
                                 gap: props.get($size);
+
+                                @include bem.modifier('separated') {
+                                        @include bem.elem('item') {
+                                                @include bem.next-twin-elem {
+                                                        &::before {
+                                                                content: '·';
+                                                                margin-inline: calc(.65 * props.get($size));
+                                                        }
+                                                }
+                                        }
+                                }
+                        }
+                }
+
+                @include bem.modifier('separated') {
+                        gap: 0;
+
+                        @include bem.elem('item') {
+                                @include bem.next-twin-elem {
+                                        &::before {
+                                                content: '·';
+                                                margin-inline: calc(.65 * props.get(vars.$gap));
+                                        }
+                                }
                         }
                 }
 
@@ -35,7 +59,7 @@
                         @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
                                 @include bem.modifier('buttons-#{$mod}') {
                                         margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
-    
+
                                         @include bem.modifier('pill') {
                                                 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
                                         }
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index f18f596..46cc401 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -202,7 +202,7 @@
                                         box-shadow: none;
 
                                         @include bem.elem('image') {
-                                                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                                                margin:           calc(-1 * props.get(vars.$key-focus--border-width) - props.get(vars.$border-width));
                                                 outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
                                                 background-color: props.get(vars.$quiet--hover--image-color);
                                                 border:           props.get(vars.$key-focus--border-offset) solid transparent;
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index c7c08a6..03ed7dd 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -110,9 +110,9 @@ $display--font-family--lg:      props.def(--o-heading--display--lg--font-family,
 $display--line-height--lg:      props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
 $display--font-size--lg:        props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default;
 $display--font-weight--lg:      props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
-$display--letter-spacing--lg:   props.def(--o-heading--display--lg--letter-spacing, 0) !default;
+$display--letter-spacing--lg:   props.def(--o-heading--display--lg--letter-spacing, 1px) !default;
 $display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
-$display--text-transform--lg:   props.def(--o-heading--display--lg--text-transform, none) !default;
+$display--text-transform--lg:   props.def(--o-heading--display--lg--text-transform, uppercase) !default;
 
 $display--font-family--md:      props.def(--o-heading--display--md--font-family, props.get(core.$font--standard--family)) !default;
 $display--line-height--md:      props.def(--o-heading--display--md--line-height, props.get(core.$font--standard--line-height)) !default;