Typography

1 files changed, 25 insertions, 0 deletions

diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index c241557..c5033e8 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,6 +1,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 @use '../mixins' as mx;
+@use 'include-media/dist/include-media' as media;
 
 @include iro.props-namespace('headings') {
     @include iro.bem-scope(iro.props-namespace()) {
@@ -56,26 +57,50 @@
 
             h1 {
                 @include mx.heading-strong(--display --xxl);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --xxl);
+                }
             }
     
             h2 {
                 @include mx.heading-strong(--display --xl);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --xl);
+                }
             }
     
             h3 {
                 @include mx.heading-strong(--display --lg);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --lg);
+                }
             }
     
             h4 {
                 @include mx.heading-strong(--display --md);
+
+                @include media.media('<=md') {
+                    @include mx.heading-strong(--display-sm --md);
+                }
             }
 
             h5 {
                 @include mx.heading-medium(--display --sm);
+
+                @include media.media('<=md') {
+                    @include mx.heading-medium(--display-sm --sm);
+                }
             }
 
             h6 {
                 @include mx.heading-faint(--display --xs);
+
+                @include media.media('<=md') {
+                    @include mx.heading-faint(--display-sm --xs);
+                }
             }
         }
     }