fix

assets/js/theme/blocks/keyFigures.js

@@ -26,11 +26,7 @@ class KeyFigures {
             target = parseFloat(figure.innerHTML, 10);
             this.values.push(0);
             this.targets.push(target);
-            figure.style.minWidth = figure.offsetWidth + 'px';
-            // Show format value if reduced motion
-            if (isReducedMotionPrefered()) {
-                figure.innerText = this.formatValue(target);
-            }
+            figure.innerText = this.formatValue(target);
         });
 
         // Show format value if reduced motion
@@ -39,6 +35,13 @@ class KeyFigures {
             this.intersectionObserver.POLL_INTERVAL = 100;
             this.intersectionObserver.observe(this.dom);
         }
+
+        this.resize();
+        this.listen();
+    }
+
+    listen () {
+        window.addEventListener('resize', this.resize.bind(this));
     }
 
     observe (entries) {
@@ -82,6 +85,13 @@ class KeyFigures {
         return value.toLocaleString('en').replace(',', separator);
     }
 
+    resize () {
+        this.figures.forEach((figure) => {
+            figure.style.minWidth = 0;
+            figure.style.minWidth = figure.offsetWidth + 'px';
+        });
+    }
+
     static easeInOutQuart (t, b, c, d) {
         if ((t /= d / 2) < 1) {
             return c / 2 * t * t * t * t + b;

assets/sass/_theme/_configuration.sass

@@ -175,7 +175,20 @@ $block-testimonials-pagination-background: $main-border-color !default
 $block-testimonials-pagination-progress-background: $main-color !default
 
 // Block key_figures
-$block-key_figures-number-font-size: px2rem(60) !default
+$block-key_figures-font-size: px2rem(16) !default
+$block-key_figures-number-font-size: px2rem(32) !default
+
+$block-key_figures-font-size-md: px2rem(18) !default
+$block-key_figures-number-font-size-md: px2rem(40) !default
+
+$block-key_figures-font-size-lg: px2rem(20) !default
+$block-key_figures-number-font-size-lg: px2rem(50) !default
+
+$block-key_figures-font-size-xl: $block-key_figures-font-size-lg !default
+$block-key_figures-number-font-size-xl: px2rem(60) !default
+
+$block-key_figures-font-size-xxl: $block-key_figures-font-size-xl !default
+$block-key_figures-number-font-size-xxl: px2rem(80) !default
 
 // Sections
 $article-title-size: $h4-size !default

assets/sass/_theme/blocks/key_figures.sass

 .block-key_figures
     ul
-        // --bs-gutter-y: 3rem
-        @include grid(3, md)
-        list-style: none
-        padding-left: 0
-        margin-bottom: 0
-        li
-            // margin-bottom: 3rem
+        @include grid(4, md)
+        @include list-reset
     dl
         margin-bottom: 0
         dt
             white-space: nowrap
+            font-size: $block-key_figures-font-size
             strong
                 display: inline-block
                 font-size: $block-key_figures-number-font-size
-                // padding-right: map-get($spacers, 1)
+            @include media-breakpoint-up(md)
+                font-size: $block-key_figures-font-size-md
+                strong
+                    font-size: $block-key_figures-number-font-size-md
+            @include media-breakpoint-up(lg)
+                font-size: $block-key_figures-font-size-lg
+                strong
+                    font-size: $block-key_figures-number-font-size-lg
+            @include media-breakpoint-up(xl)
+                font-size: $block-key_figures-font-size-xl
+                strong
+                    font-size: $block-key_figures-number-font-size-xl
+            @include media-breakpoint-up(xxl)
+                font-size: $block-key_figures-font-size-xxl
+                strong
+                    font-size: $block-key_figures-number-font-size-xxl
         dd
             margin-bottom: 0
             margin-left: 0

assets/sass/_theme/blocks/pages.sass

@@ -32,11 +32,8 @@
                 margin-top: calc(#{$spacing2} + #{$h6-size-md})
             .page
                 .title
-                    margin-bottom: 0
                     a
                         @include hover-translate-icon(before, 3)
-                        @extend .p
-                        font-family: $body-font-family
                         text-decoration-color: transparent
                         &:hover
                             text-decoration-color: black