Merge branch 'NXSTAGE-X-hero-improvements' into 'development'

NXSTAGE-X: Update hero values

See merge request julkiset-sivut/design-system-lib!148

src/components/hy-hero/hy-hero.scss

@@ -270,16 +270,25 @@
       }
 
       @include breakpoint($wide) {
+        min-height: 338px;
         padding: 52px 2rem;
       }
 
+      @include breakpoint(1060px) {
+        min-height: 373px;
+      }
+
+      @include breakpoint(1160px) {
+        min-height: 480px;
+      }
+
       @include breakpoint($extrawide) {
         padding-left: 32px; // Original 24px + 8px
         padding-right: 8px;
       }
 
-      @include breakpoint($xlarge) {
-        padding-left: 0;
+      @include breakpoint(1260px) {
+        min-height: 443px;
       }
 
       @include breakpoint(1280px) {
@@ -287,12 +296,36 @@
         padding-left: 0;
       }
 
-      @include breakpoint(1440px) {
-        min-height: 540px;
+      @include breakpoint(1360px) {
+        min-height: 478px;
+      }
+
+      @include breakpoint(1460px) {
+        min-height: 513px;
+      }
+
+      @include breakpoint(1560px) {
+        min-height: 548px;
+      }
+
+      @include breakpoint($xlarge) {
+        padding-left: 0;
+      }
+
+      @include breakpoint(1660px) {
+        min-height: 583px;
+      }
+
+      @include breakpoint(1760px) {
+        min-height: 619px;
+      }
+
+      @include breakpoint(1860px) {
+        min-height: 654px;
       }
 
       @include breakpoint(1920px) {
-        min-height: 720px;
+        min-height: 675px;
       }
     }
 
@@ -386,7 +419,7 @@
     position: absolute;
     right: 0;
     top: 0;
-    width: 60%;
+    width: 56.25%;
   }
 }
 
@@ -411,29 +444,59 @@
     flex-direction: column;
     justify-content: center;
     margin: 0 auto;
-    min-height: 360px;
+    min-height: 329px;
     padding: 52px 2rem 52px calc(2rem - 8px);
     position: relative;
     width: 100%;
   }
 
+  @include breakpoint(1060px) {
+    min-height: 364px;
+  }
+
+  @include breakpoint(1160px) {
+    min-height: 399px;
+  }
+
   @include breakpoint($extrawide) {
-    min-height: 400px;
     padding: 80px 24px;
   }
 
-  @include breakpoint($overwide) {
-    min-height: 450px;
+  @include breakpoint(1260px) {
+    min-height: 346px;
+  }
+
+  @include breakpoint(1360px) {
+    min-height: 374px;
+  }
+
+  @include breakpoint(1460px) {
+    min-height: 402px;
+  }
+
+  @include breakpoint(1560px) {
+    min-height: 430px;
   }
 
   @include breakpoint($xlarge) {
     max-width: 1216px;
-    min-height: 500px;
     padding: 80px 0;
   }
 
+  @include breakpoint(1660px) {
+    min-height: 448px;
+  }
+
+  @include breakpoint(1760px) {
+    min-height: 484px;
+  }
+
+  @include breakpoint(1860px) {
+    min-height: 519px;
+  }
+
   @include breakpoint(1920px) {
-    min-height: 600px;
+    min-height: 540px;
   }
 }
 
@@ -457,7 +520,7 @@
     order: 1;
     position: absolute;
     top: 0;
-    width: 40%;
+    width: 43.75%;
   }
 }