Merge branch 'NXSTAGE-617-Introduction_final_fixes' into 'development'

Padding fixes, image ratio fix

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

src/components/heading/heading.scss

@@ -47,7 +47,9 @@
   }
 
   .hy-heading__introduction {
-    padding: 0;
+    @include breakpoint($wide) {
+      padding-top: 0;
+    }
   }
 }
 

src/components/hy-introduction/hy-introduction.scss

@@ -81,6 +81,10 @@
         background: linear-gradient(90deg, var(--brand-main-light) 90%, var(--grayscale-white) 50%);
       }
 
+      @include breakpoint($extrawide) {
+        background: linear-gradient(90deg, var(--brand-main-light) 85%, var(--grayscale-white) 50%);
+      }
+
       .hy-introduction__content--with-image {
         background: var(--brand-main-light);
       }
@@ -107,6 +111,10 @@
         background: linear-gradient(90deg, var(--grayscale-black) 90%, var(--grayscale-white) 50%);
       }
 
+      @include breakpoint($extrawide) {
+        background: linear-gradient(90deg, var(--grayscale-black) 85%, var(--grayscale-white) 50%);
+      }
+
       .hy-introduction__content--with-image {
         background: var(--grayscale-black);
       }
@@ -163,7 +171,7 @@
     }
   }
   &__title {
-    .hy-heading__container.sc-hy-heading-wide {
+    .hy-heading__container {
       @include breakpoint($wide) {
         padding-top: 0;
       }
@@ -184,16 +192,22 @@
   }
 
   &__description {
-    @include font-size(18px, 28px);
+    @include font-size(16px, 24px);
     @include font-weight($semibold);
 
     color: var(--grayscale-black);
     font-family: var(--main-font-family);
     letter-spacing: -0.1px;
-    margin-bottom: 48px;
+    margin-bottom: 28px;
+
+    @include breakpoint($medium) {
+      @include font-size(18px, 28px);
+      margin-bottom: 38px;
+    }
 
     @include breakpoint($wide) {
       @include font-size(20px, 32px);
+      margin-bottom: 48px;
     }
   }
 

src/components/hy-introduction/hy-introduction.tsx

@@ -58,7 +58,7 @@ export class HyIntroduction {
               </div>
               {this.imageUrl && (
                 <div class="hy-introduction__image">
-                  <hy-image image-url={this.imageUrl} aspectRatioWidth={7} aspectRatioHeight={5} />
+                  <hy-image image-url={this.imageUrl} aspectRatioWidth={3} aspectRatioHeight={2} />
                 </div>
               )}
             </div>