3 files changed, 14 insertions, 4 deletions
diff --git a/htdocs/src/scss/abstracts/_variables.scss b/htdocs/src/scss/abstracts/_variables.scss
index b1f9fd8..a8a22a8 100644
--- a/htdocs/src/scss/abstracts/_variables.scss
+++ b/htdocs/src/scss/abstracts/_variables.scss
@@ -68,6 +68,7 @@ $font-size_md: $font-size_base-rem * math.pow($font-size_ratio, 0);
 $font-size_lg: $font-size_base-rem * math.pow($font-size_ratio, 1);
 $font-size_xl: $font-size_base-rem * math.pow($font-size_ratio, 2);
 $font-size_2xl: $font-size_base-rem * math.pow($font-size_ratio, 3);
+$font-size_3xl: $font-size_base-rem * math.pow($font-size_ratio, 4);
 
 //============================================================================
 // Spacings
diff --git a/htdocs/src/scss/base/_fonts.scss b/htdocs/src/scss/base/_fonts.scss
index 9d6c250..192f6b8 100644
--- a/htdocs/src/scss/base/_fonts.scss
+++ b/htdocs/src/scss/base/_fonts.scss
@@ -109,6 +109,7 @@
     font-size-lg: #{var.$font-size_lg},
     font-size-xl: #{var.$font-size_xl},
     font-size-2xl: #{var.$font-size_2xl},
+    font-size-3xl: #{var.$font-size_3xl},
     line-height: #{var.$line-height},
   )
 );
diff --git a/htdocs/src/scss/layout/_header.scss b/htdocs/src/scss/layout/_header.scss
index 624afc0..26faf84 100644
--- a/htdocs/src/scss/layout/_header.scss
+++ b/htdocs/src/scss/layout/_header.scss
@@ -27,7 +27,11 @@
 
   &__title {
     font-family: fun.get-var(font-family-secondary);
-    font-size: fun.get-var(font-size-2xl);
+    font-size: clamp(
+      #{fun.get-var(font-size-2xl)},
+      5vw,
+      #{fun.get-var(font-size-3xl)}
+    );
     font-weight: 500;
     margin: fun.get-var(spacing-xs) 0 fun.get-var(spacing-3xs);
   }
@@ -54,7 +58,11 @@
 
   &__description {
     font-family: fun.get-var(font-family-secondary);
-    font-size: fun.get-var(font-size-md);
+    font-size: clamp(
+      #{fun.get-var(font-size-md)},
+      3vw,
+      #{fun.get-var(font-size-lg)}
+    );
     font-weight: 400;
     letter-spacing: fun.convert-px(1);
     margin: 0;
@@ -85,10 +93,10 @@
 
   &__link {
     display: block;
-    height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(85)});
+    height: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)});
     transform-style: preserve-3d;
     transition: all 0.6s linear 0s;
-    width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(85)});
+    width: clamp(#{fun.convert-px(75)}, 15vmin, #{fun.convert-px(90)});
 
     &:hover,
     &:focus {