diff --git a/src/components.d.ts b/src/components.d.ts
index ea84cdd5c818190f70568fe92e427874e14a8527..3ebb55af7cf6b5e971b08850ba5cdf30859bdf30 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -297,6 +297,7 @@ export namespace Components {
   interface HyHero {
     colorVariant: HeroColorVariant;
     description: string;
+    headerstyle: string;
     heading: string;
     image: string;
     scLabel?: string;
@@ -1226,6 +1227,7 @@ declare namespace LocalJSX {
   interface HyHero {
     colorVariant?: HeroColorVariant;
     description?: string;
+    headerstyle?: string;
     heading?: string;
     image?: string;
     scLabel?: string;
diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 8e12b0b104c9982e1d910c6a17115122a0eaf6c0..962bb86403eb012b306c8b3f85b834bb7f228928 100644
--- a/src/components/cta-button/cta-button.scss
+++ b/src/components/cta-button/cta-button.scss
@@ -13,13 +13,69 @@
   position: relative;
   text-decoration: none;
 
+  &.transparent-background {
+    background-color: var(--grayscale-white);
+    color: var(--grayscale-black);
+
+    .link-icon svg {
+      background-color: var(--grayscale-white);
+      fill: var(--grayscale-black);
+    }
+
+    .text {
+      color: var(--grayscale-black);
+    }
+  }
+
+  &.black-background {
+    background-color: var(--grayscale-black);
+    color: var(--grayscale-white);
+
+    .link-icon svg {
+      background-color: var(--grayscale-black);
+      fill: var(--grayscale-white);
+    }
+
+    .text {
+      color: var(--grayscale-white);
+    }
+  }
+
+  &.blue-background {
+    background-color: var(--brand-main-light);
+    color: var(--grayscale-white);
+
+    .link-icon svg {
+      background-color: var(--brand-main-light);
+      fill: var(--grayscale-white);
+    }
+
+    .text {
+      color: var(--grayscale-white);
+    }
+  }
+
+  &.white-background {
+    background-color: var(--brand-main-light);
+    color: var(--grayscale-white);
+
+    .link-icon svg {
+      background-color: var(--brand-main-light);
+      fill: var(--grayscale-white);
+    }
+
+    .text {
+      color: var(--grayscale-white);
+    }
+  }
+
+  &.transparent-background,
+  &.black-background,
   &.blue-background,
   &.white-background {
     align-items: center;
-    background-color: var(--brand-main-light);
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
     box-sizing: border-box;
-    color: var(--grayscale-white);
     display: flex;
     justify-content: center;
     height: 100%;
@@ -40,7 +96,6 @@
 
     .text {
       @include font-size(16px, 16px); //button small
-      color: var(--grayscale-white);
 
       @include breakpoint($narrow) {
         @include font-size(18px, 18px); //button medium
@@ -69,8 +124,6 @@
       }
 
       svg {
-        background-color: var(--brand-main-light);
-        fill: var(--grayscale-white);
         height: 16px;
         width: 16px;
 
@@ -93,13 +146,21 @@
     }
   }
 
-  &.blue-background {
+  &.blue-background,
+  &.black-background {
     border: 3px solid var(--grayscale-white);
     @include breakpoint($overwide) {
       border: 4px solid var(--grayscale-white);
     }
   }
 
+  &.transparent-background {
+    border: 3px solid var(--grayscale-black);
+    @include breakpoint($overwide) {
+      border: 4px solid var(--grayscale-black);
+    }
+  }
+
   &.white-background {
     border: none;
   }
@@ -130,9 +191,16 @@
     }
   }
 
-  &.blue-background {
+  &.blue-background,
+  &.black-background {
     @include breakpoint($extrawide) {
       border: 4px solid var(--grayscale-white);
     }
   }
+
+  &.transparent-background {
+    @include breakpoint($extrawide) {
+      border: 4px solid var(--grayscale-black);
+    }
+  }
 }
diff --git a/src/components/cta-button/readme.md b/src/components/cta-button/readme.md
index fcf2aa95391fc52c9a31d9eb2da0165986cc0ea9..912fbf5b3a87d9ac215450c0713cd4e69948ec25 100644
--- a/src/components/cta-button/readme.md
+++ b/src/components/cta-button/readme.md
@@ -4,20 +4,21 @@
 
 ## Properties
 
-| Property      | Attribute      | Description | Type                                                                                                     | Default                            |
-| ------------- | -------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------- |
-| `headerstyle` | `headerstyle`  |             | `string`                                                                                                 | `'common'`                         |
-| `isExternal`  | `is-external`  |             | `boolean`                                                                                                | `false`                            |
-| `linkContent` | `link-content` |             | `string`                                                                                                 | `''`                               |
-| `scLabel`     | `sc-label`     |             | `string`                                                                                                 | `undefined`                        |
-| `url`         | `url`          |             | `string`                                                                                                 | `undefined`                        |
-| `variant`     | `variant`      |             | `CtaLinkButtonVariants.default \| CtaLinkButtonVariants.onBlueBkgd \| CtaLinkButtonVariants.onWhiteBkgd` | `CtaLinkButtonVariants.onBlueBkgd` |
+| Property      | Attribute      | Description | Type                                                                                                                                                                                     | Default                            |
+| ------------- | -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `headerstyle` | `headerstyle`  |             | `string`                                                                                                                                                                                 | `'common'`                         |
+| `isExternal`  | `is-external`  |             | `boolean`                                                                                                                                                                                | `false`                            |
+| `linkContent` | `link-content` |             | `string`                                                                                                                                                                                 | `''`                               |
+| `scLabel`     | `sc-label`     |             | `string`                                                                                                                                                                                 | `undefined`                        |
+| `url`         | `url`          |             | `string`                                                                                                                                                                                 | `undefined`                        |
+| `variant`     | `variant`      |             | `CtaLinkButtonVariants.default \| CtaLinkButtonVariants.onBlackBkgd \| CtaLinkButtonVariants.onBlueBkgd \| CtaLinkButtonVariants.onTransparentBkgd \| CtaLinkButtonVariants.onWhiteBkgd` | `CtaLinkButtonVariants.onBlueBkgd` |
 
 ## Dependencies
 
 ### Used by
 
 - [hy-banner](../hy-banner)
+- [hy-hero](../hy-hero)
 
 ### Depends on
 
@@ -29,6 +30,7 @@
 graph TD;
   hy-cta-button --> hy-icon
   hy-banner --> hy-cta-button
+  hy-hero --> hy-cta-button
   style hy-cta-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 45de7be5ca933e416446fab7b6cdd36ff7372a60..f61fcef9d518acc1b1259dc884242535a132006b 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -108,6 +108,43 @@ h2.hy-heading__landingsection {
   }
 }
 
+/*
+  H1 used in Hero paragraph.
+*/
+h1.hy-heading__introduction {
+  @include font-size(32px, 32px);
+  @include font-weight($bold);
+
+  color: inherit;
+  font-family: var(--main-font-family);
+  letter-spacing: -1px;
+  margin-bottom: 0;
+
+  @include breakpoint($narrow) {
+    // Medium
+    @include font-size(48px, 48px);
+    letter-spacing: -1.5px;
+  }
+
+  @include breakpoint($wide) {
+    // Medium with sidebar
+    @include font-size(48px, 48px);
+    letter-spacing: -1.5px;
+  }
+
+  @include breakpoint($extrawide) {
+    // Medium with sidebar
+    @include font-size(48px, 48px);
+    letter-spacing: -1.5px;
+  }
+
+  @include breakpoint($overwide) {
+    // Large with sidebar
+    @include font-size(56px, 56px);
+    letter-spacing: -1.8px;
+  }
+}
+
 // Applied when there is a sidebar
 .hy-heading__container__common {
   h2.hy-heading__introduction,
@@ -167,6 +204,21 @@ h2.hy-heading__landingsection {
       padding: 0 0 20px;
     }
   }
+
+  //Hero h1
+  h1.hy-heading__introduction {
+    @include breakpoint($extrawide) {
+      // > 1200px Large
+      @include font-size(56px, 56px);
+      letter-spacing: -1.8px;
+    }
+
+    @include breakpoint($overwide) {
+      // > 1400px X-Large
+      @include font-size(72px, 72px);
+      letter-spacing: -2.5px;
+    }
+  }
 }
 
 // h3 on landing pages use the same fonts as h2 on content pages; no line; no caps
@@ -193,37 +245,6 @@ h3.hy-heading__landingsection {
   }
 }
 
-/*
-  H1 used in Hero paragraph.
-*/
-h1.hy-heading__introduction {
-  @include font-size(32px, 32px);
-  @include font-weight($bold);
-
-  color: inherit;
-  font-family: var(--main-font-family);
-  letter-spacing: -1px;
-  margin-bottom: 0;
-
-  @include breakpoint($narrow) {
-    // > 480px
-    @include font-size(48px, 48px);
-    letter-spacing: -1.5px;
-  }
-
-  @include breakpoint($extrawide) {
-    // > 1200px
-    @include font-size(60px, 60px);
-    letter-spacing: -1.9px;
-  }
-
-  @include breakpoint($overwide) {
-    // > 1400px
-    @include font-size(80px, 80px);
-    letter-spacing: -2.5px;
-  }
-}
-
 h1,
 h2,
 h3,
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 4f5f75afa4f5352a7af44ab49a1d1f2100194ed0..c1cfd09b348a888e0a99aa281259ad75075f0574 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -6,8 +6,14 @@
   position: relative;
 
   @include breakpoint($wide) {
-    display: flex;
-    margin: 32px 0 56px 0;
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  &__desktop-container {
+    @include breakpoint($wide) {
+      display: flex;
+    }
   }
 
   &__image-container {
@@ -18,11 +24,9 @@
 
     @include breakpoint($wide) {
       background: white;
-      margin-left: 30%;
-      min-height: 600px;
-      padding: 6px 0;
       order: 2;
-      width: auto;
+      padding: 6px 0;
+      width: 60%;
       z-index: 1;
     }
 
@@ -35,215 +39,350 @@
   }
 
   &__content {
+    display: none;
+    margin-right: 24px;
+    margin-top: -24px;
+    min-height: 24px;
+    max-width: 100%;
     position: relative;
 
-    margin-top: -32px;
-    min-height: 32px;
-    max-width: 100px;
-
-    @include breakpoint($medium) {
-      margin-top: -48px;
-      min-height: 48px;
-      max-width: 100px;
+    @include breakpoint($narrow) {
+      margin-right: 48px;
+      margin-top: -40px;
+      min-height: 40px;
+      max-width: 87%; //7col (out of 8) - 32px (1 margin)
     }
 
     @include breakpoint($wide) {
       display: none;
     }
+  }
 
-    &-wrap-helper {
-      margin-top: -32px;
-      position: relative;
+  &__content--bottom {
+    @include breakpoint($extrawide) {
+      margin-right: 32px;
+    }
+  }
 
-      @include breakpoint($medium) {
-        margin-top: -48px;
-      }
+  &__content--container {
+    //@todo left is now calculated in js. Find a css solution
+    position: relative;
 
-      @include breakpoint($wide) {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: center;
-        left: 0;
-        margin: 0;
-        order: 1;
-        position: absolute;
-        top: 0;
-        width: 100%;
-        z-index: 2;
-      }
+    @include breakpoint($wide) {
+      margin-left: 32px;
+      margin-right: -32px;
+      padding-bottom: 44px;
+      padding-top: 20px;
+    }
+
+    @include breakpoint($extrawide) {
+      padding-bottom: 44px;
+      padding-top: 20px;
+      margin-left: 0;
+      margin-right: 0;
+
+      //without sidebar
+      //padding-bottom: 78px;
+      //padding-top: 48px;
+    }
+    @include breakpoint($overwide) {
+      padding-bottom: 78px;
+      padding-top: 48px;
+
+      //without sidebar
+      //padding-bottom: 92px;
+      //padding-top: 56px;
+    }
+  }
+
+  &__content-wrap-helper {
+    padding: 0 1rem;
+    padding-bottom: 32px;
+
+    @include breakpoint($narrow) {
+      padding: 0 2rem;
+      padding-bottom: 40px;
+    }
+    @include breakpoint($wide) {
+      padding: 0;
+      align-self: center;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: center;
+      left: 0;
+      margin: 0;
+      order: 1;
+      position: relative;
+      top: 0;
+      width: 40%;
+      z-index: 2;
     }
   }
 
   &--blue {
     background-color: var(--brand-main-light);
 
-    .hy-hero__content,
-    .hy-hero__title,
-    .hy-hero__description {
+    .hy-hero__title__overlay {
       background-color: var(--brand-main-light);
+      color: transparent !important;
     }
 
-    .hy-hero__content--bottom {
+    .hy-hero__content,
+    .hy-hero__description,
+    .hy-hero__cta-link__container {
       background-color: var(--brand-main-light);
-
-      @include breakpoint($wide) {
-        background-color: transparent;
-      }
+      color: var(--grayscale-white);
     }
   }
 
   &--black {
     background-color: var(--grayscale-black);
 
+    .hy-hero__title__overlay {
+      background-color: var(--grayscale-black);
+      color: transparent !important;
+    }
+
     .hy-hero__content,
-    .hy-hero__title,
     .hy-hero__description,
     .hy-hero__cta-link__container {
       background-color: var(--grayscale-black);
       color: var(--grayscale-white);
     }
-
-    .hy-hero__content--bottom {
-      background-color: var(--grayscale-black);
-
-      @include breakpoint($wide) {
-        background-color: transparent;
-      }
-    }
   }
 
   &--white {
     background-color: var(--grayscale-white);
 
+    .hy-hero__title__overlay {
+      background-color: var(--grayscale-white);
+      color: transparent !important;
+    }
+
     .hy-hero__content,
-    .hy-hero__title,
     .hy-hero__description,
     .hy-hero__cta-link__container {
       background-color: var(--grayscale-white);
       color: var(--grayscale-black);
     }
+  }
 
-    .hy-hero__cta-link {
-      border-color: var(--grayscale-black);
-
-      &__icon svg {
-        fill: var(--grayscale-black);
-      }
-    }
-
-    .hy-hero__content--bottom {
-      background-color: var(--grayscale-white);
+  &__title__container {
+    position: relative;
+    padding-bottom: 1rem;
 
-      @include breakpoint($wide) {
-        background-color: transparent;
-      }
+    @include breakpoint($wide) {
+      width: 110%;
     }
   }
 
-  &__title {
-    @include font-size(32px, 32px);
+  &__description {
+    // Ingress Small
+    @include font-size(16px, 24px);
 
     color: var(--grayscale-white);
     font-family: var(--main-font-family);
-    font-weight: bold;
-    hyphens: auto;
-    letter-spacing: -1.88px;
-    margin-top: -32px;
-    max-width: 80%;
-    padding: 32px 32px 0 0;
-    text-transform: uppercase;
-    z-index: 2;
+    font-weight: 600;
+    letter-spacing: -0.1px;
+    margin: 12px 0 24px 0;
+    padding: 0;
 
-    @include breakpoint($medium) {
-      @include font-size(48px, 54px);
-      margin-top: -48px;
-      padding: 48px 40px 0 0;
+    @include breakpoint($narrow) {
+      margin: 16px 0 24px 0;
+      max-width: 87%;
+
+      // Ingress Medium
+      @include font-size(18px, 28px);
+      letter-spacing: -0.1px;
     }
 
     @include breakpoint($wide) {
-      @include font-size(60px, 60px);
+      @include font-size(18px, 28px);
+      letter-spacing: -0.1px;
 
-      margin: 0;
-      max-width: 56.94%;
-      padding: 24px 24px 0 0;
-      width: fit-content;
+      max-width: 100%;
+      margin: 9px 0 0;
+      padding: 0 24px 20px 0;
+    }
+
+    @include breakpoint($extrawide) {
+      margin: 9px 0 0;
+      padding: 0 24px 20px 0;
+    }
+
+    @include breakpoint($overwide) {
+      margin: 9px 0 0;
+      padding: 0 40px 32px 0;
     }
   }
 
-  &__description {
-    @include font-size(16px, 20px);
+  &__cta-link__container {
+    max-width: 100%;
+    @include breakpoint($wide) {
+      max-width: 87%;
+    }
+  }
+}
 
-    color: var(--grayscale-white);
-    font-family: var(--main-font-family);
-    font-weight: 600;
-    letter-spacing: -0.1px;
-    padding: 24px 24px 32px 0;
+.hy-hero.hy-hero--common {
+  @include breakpoint($overwide) {
+    margin-left: -32px;
+    padding-left: 32px;
+  }
+}
 
-    @include breakpoint($narrow) {
-      padding: 28px 24px 40px 0;
+.hy-hero.large {
+  .hy-hero__content--container {
+    @include breakpoint($extrawide) {
+      padding-bottom: 78px;
+      padding-top: 48px;
+    }
+    @include breakpoint($overwide) {
+      padding-bottom: 92px;
+      padding-top: 56px;
     }
 
-    @include breakpoint($wide) {
-      @include font-size(18px, 24px);
+    @include breakpoint($extrawide) {
+      //without sidebar
+      padding-bottom: 78px;
+      padding-top: 48px;
+    }
+    @include breakpoint($overwide) {
+      padding-bottom: 92px;
+      padding-top: 56px;
+    }
+  }
 
-      line-height: 32px;
-      max-width: 48.33%;
-      width: fit-content;
+  /*   .hy-hero__title {
+    @include breakpoint($extrawide) {
+      padding: 30px 40px 16px 0;
+    }
+    @include breakpoint($overwide) {
+      padding: 36px 48px 20px 0;
+    }
+  } */
+
+  .hy-hero__description {
+    @include breakpoint($extrawide) {
+      margin: 0;
+      padding: 0 40px 32px 0;
+    }
+
+    @include breakpoint($overwide) {
+      padding: 0 40px 36px 0;
     }
   }
+}
+.hy-hero__title {
+  z-index: 2;
+}
+
+.hy-hero__title__overlay--container {
+  left: 0;
+  opacity: 1;
+  position: absolute;
+  top: 0;
 
-  &__cta-link {
-    @include font-size(16px);
+  .hy-hero__title__overlay {
+    @include font-size(32px, 32px);
+    @include font-weight($bold);
 
-    align-items: center;
-    background-color: transparent;
-    border: 2px solid var(--grayscale-white);
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-    color: inherit;
-    cursor: pointer;
-    display: flex;
+    box-decoration-break: clone;
     font-family: var(--main-font-family);
-    font-weight: 600;
-    height: 100%;
-    justify-content: center;
-    padding: 8px 12px 8px 12px;
-    position: relative;
-    text-decoration: none;
+    display: inline;
+    letter-spacing: -1px;
+    margin-bottom: 0;
+    margin-left: -32px;
+    padding-left: 32px;
 
-    @include breakpoint($wide) {
-      @include font-size(18px);
+    @include breakpoint($narrow) {
+      // Medium
+      @include font-size(48px, 48px);
+      letter-spacing: -1.5px;
+      margin-left: -32px;
+      padding-left: 32px;
+    }
 
-      padding: 16px 24px 16px 24px;
+    @include breakpoint($medium) {
+      margin-left: -32px;
+      padding-left: 32px;
     }
 
-    &__icon {
-      margin-left: 1rem;
+    @include breakpoint($wide) {
+      // Medium with sidebar
+      @include font-size(48px, 48px);
+      letter-spacing: -1.5px;
+      margin-left: 0;
+      padding-left: 0;
+    }
 
-      svg {
-        fill: var(--grayscale-white);
-      }
+    @include breakpoint($extrawide) {
+      // Medium with sidebar
+      @include font-size(48px, 48px);
+      letter-spacing: -1.5px;
     }
 
-    &__container {
-      background-color: var(--brand-main-light);
-      color: var(--grayscale-white);
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      max-width: 320px;
-      padding: 32px 0 40px 0;
-      width: fit-content;
+    @include breakpoint($overwide) {
+      // Large with sidebar
+      @include font-size(56px, 56px);
+      letter-spacing: -1.8px;
+    }
+  }
+}
 
-      @include breakpoint($narrow) {
-        padding: 0 24px 48px 0;
-      }
+.hy-hero__title,
+.hy-hero__title__overlay {
+  @include font-weight($bold);
+
+  box-decoration-break: clone;
+  display: inline;
+  //padding: 0 1rem;
+  color: var(--grayscale-white);
+  font-family: var(--main-font-family);
+  font-weight: bold;
+  letter-spacing: -0.75px;
+  word-wrap: break-word;
+  hyphens: auto;
+  margin-bottom: 12px;
+  max-width: 100%;
+  position: relative;
+  text-transform: uppercase;
 
-      @include breakpoint($wide) {
-        align-self: flex-start;
-        padding: 0 24px 56px 0;
-      }
-    }
+  @include breakpoint($narrow) {
+    margin-bottom: 16px;
+  }
+
+  @include breakpoint($wide) {
+    margin: 0;
+    max-width: 100%;
+    //padding: 24px 32px 16px 0;
+  }
+  @include breakpoint($extrawide) {
+    //padding: 24px 32px 16px 0;
+  }
+  @include breakpoint($overwide) {
+    //padding: 30px 40px 16px 0;
+  }
+}
+
+.hy-hero__title h1,
+.hy-hero__title__overlay {
+  padding: 1rem;
+
+  @include breakpoint($narrow) {
+    margin-bottom: 16px;
+  }
+
+  @include breakpoint($wide) {
+    margin: 0;
+    max-width: 100%;
+    padding: 16px 32px 16px 0;
+  }
+  @include breakpoint($extrawide) {
+    padding: 16px 32px 16px 0;
+  }
+  @include breakpoint($overwide) {
+    padding: 16px 40px 16px 0;
   }
 }
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index 4d6eb02681757cc1822b8feeee9132211ef62a71..1018e239b836ddbc7b41b45008c2e842dfdb95c5 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -1,6 +1,7 @@
-import {Component, Host, h, Prop, Element} from '@stencil/core';
+import {Component, Host, h, Listen, Prop, Element} from '@stencil/core';
 import {HeroColorVariant} from '../../utils/utils';
 import {HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
+import {CtaLinkButtonVariants} from '../../utils/utils';
 
 @Component({
   tag: 'hy-hero',
@@ -16,9 +17,54 @@ export class HyHero {
   @Prop() url: string;
   @Prop() urlTitle: string;
   @Prop() scLabel?: string;
+  @Prop() headerstyle: string = 'common';
+
+  componentDidLoad() {
+    let hyMainDiv = this.el.closest('.hy-main');
+    if (hyMainDiv) {
+      if (!hyMainDiv.classList.contains('with-sidebar')) {
+        this.headerstyle = 'large';
+      }
+    }
+
+    this.setContentDivPosition();
+  }
+
+  setContentDivPosition() {
+    const contentDiv = document.querySelectorAll('.hy-hero__content--container')[0] as HTMLElement;
+    if (!contentDiv) return;
+
+    if (document.body.scrollWidth <= 1200) {
+      contentDiv.style.left = '0';
+    }
+    if (document.body.scrollWidth >= 1201) {
+      const contentWrapper = document.querySelectorAll('div.hy-main-content-wrapper')[0] as HTMLElement;
+      if (!contentWrapper) return;
+
+      if (document.body.scrollWidth >= 1441) {
+        const marginLeft = parseInt(window.getComputedStyle(contentWrapper).getPropertyValue('margin-left'));
+        if (marginLeft > 32) {
+          contentDiv.style.left = `${marginLeft}px`;
+        } else if (marginLeft > 0) {
+          contentDiv.style.left = '32px';
+        } else if (marginLeft == 0) {
+          contentDiv.style.left = '0px';
+        }
+      } else {
+        contentDiv.style.left = window.getComputedStyle(contentWrapper).getPropertyValue('padding-left');
+      }
+    }
+  }
+
+  @Listen('resize', {target: 'window'})
+  resizeEventListener(event) {
+    if (!event) return;
+
+    this.setContentDivPosition();
+  }
 
   render() {
-    const classAttributes = ['hy-hero', `hy-hero--${this.colorVariant}`].join(' ');
+    const classAttributes = ['hy-hero', `hy-hero--${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' ');
 
     const aspectRatioWidth = 8;
     const aspectRatioHeight = 5;
@@ -27,38 +73,58 @@ export class HyHero {
       '--aspectRatio': `${aspect}%` as 'aspectRatio',
     };
 
+    var variant = CtaLinkButtonVariants.onBlueBkgd;
+
+    if (this.colorVariant == HeroColorVariant.black) {
+      variant = CtaLinkButtonVariants.onBlackBkgd;
+    } else if (this.colorVariant == HeroColorVariant.white) {
+      variant = CtaLinkButtonVariants.onTransparentBkgd;
+    }
+
     return (
       <Host>
         <div class={classAttributes}>
-          <div class="hy-hero__image-container" style={aspectRatio}>
-            <img alt={this.scLabel} class="hy-image__image" src={this.image} />
-          </div>
-          <div class="hy-hero__content"></div>
-          <div class="hy-hero__content-wrap-helper">
-            <hy-main-content-wrapper>
-              <div class="hy-hero__content--container">
-                <hy-heading
-                  class="hy-hero__title"
-                  heading={HeadingVarians.default}
-                  section={HeadingSectionVariants.introduction}
-                >
-                  {this.heading}
-                </hy-heading>
-                <div class="hy-hero__content--bottom">
-                  {this.description && <div class="hy-hero__description">{this.description}</div>}
-                  {this.url && (
-                    <div class="hy-hero__cta-link__container">
-                      <a href={this.url} class="hy-hero__cta-link" aria-label={this.scLabel}>
-                        {this.urlTitle}
-                        <span class="hy-hero__cta-link__icon">
-                          <hy-icon icon={'hy-icon-arrow-right'} size={26} />
-                        </span>
-                      </a>
+          <div>
+            <div class="hy-hero__desktop-container">
+              <div class="hy-hero__image-container" style={aspectRatio}>
+                <img alt={this.scLabel} class="hy-image__image" src={this.image} />
+              </div>
+              <div class="hy-hero__content"></div>
+              <div class="hy-hero__content-wrap-helper">
+                <div class="hy-hero__content--container">
+                  <div class="hy-hero__title__container">
+                    <hy-heading
+                      class="hy-hero__title"
+                      heading={HeadingVarians.default}
+                      section={HeadingSectionVariants.introduction}
+                    >
+                      {this.heading}
+                    </hy-heading>
+                    <div class="hy-hero__title__overlay--container">
+                      <h1 class="hy-hero__title__overlay">{this.heading}</h1>
                     </div>
-                  )}
+                  </div>
+                  <div class="hy-hero__content--bottom">
+                    {this.description && (
+                      <div class="hy-hero__description__container">
+                        <div class="hy-hero__description">{this.description}</div>
+                      </div>
+                    )}
+                    {this.url && (
+                      <div class="hy-hero__cta-link__container">
+                        <hy-cta-button
+                          link-content={this.urlTitle}
+                          sc-label={this.scLabel}
+                          url={this.url}
+                          is-external="false"
+                          variant={variant}
+                        />
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
-            </hy-main-content-wrapper>
+            </div>
           </div>
         </div>
       </Host>
diff --git a/src/components/hy-hero/readme.md b/src/components/hy-hero/readme.md
index 70bfe359cfc292c670176a36213acb7bc586c97a..0c0a5a0967b4586d91ccbe4d70fd1e52b9f3fb26 100644
--- a/src/components/hy-hero/readme.md
+++ b/src/components/hy-hero/readme.md
@@ -8,6 +8,7 @@
 | -------------- | --------------- | ----------- | --------------------------------------------------------------------------- | ----------------------- |
 | `colorVariant` | `color-variant` |             | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.white` | `HeroColorVariant.blue` |
 | `description`  | `description`   |             | `string`                                                                    | `undefined`             |
+| `headerstyle`  | `headerstyle`   |             | `string`                                                                    | `'common'`              |
 | `heading`      | `heading`       |             | `string`                                                                    | `undefined`             |
 | `image`        | `image`         |             | `string`                                                                    | `undefined`             |
 | `scLabel`      | `sc-label`      |             | `string`                                                                    | `undefined`             |
@@ -18,17 +19,16 @@
 
 ### Depends on
 
-- [hy-main-content-wrapper](../hy-main-content-wrapper)
 - [hy-heading](../heading)
-- [hy-icon](../icon)
+- [hy-cta-button](../cta-button)
 
 ### Graph
 
 ```mermaid
 graph TD;
-  hy-hero --> hy-main-content-wrapper
   hy-hero --> hy-heading
-  hy-hero --> hy-icon
+  hy-hero --> hy-cta-button
+  hy-cta-button --> hy-icon
   style hy-hero fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/hy-main-content-wrapper/readme.md b/src/components/hy-main-content-wrapper/readme.md
index e15d1902331c992acf50f10e53f829c6f2c91df4..81487d091584727d5093d2790443439d2edef8b6 100644
--- a/src/components/hy-main-content-wrapper/readme.md
+++ b/src/components/hy-main-content-wrapper/readme.md
@@ -7,7 +7,6 @@
 ### Used by
 
 - [hy-banner](../hy-banner)
-- [hy-hero](../hy-hero)
 - [hy-introduction](../hy-introduction)
 
 ### Graph
@@ -15,7 +14,6 @@
 ```mermaid
 graph TD;
   hy-banner --> hy-main-content-wrapper
-  hy-hero --> hy-main-content-wrapper
   hy-introduction --> hy-main-content-wrapper
   style hy-main-content-wrapper fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/src/components/hy-main/hy-main.scss b/src/components/hy-main/hy-main.scss
index e5f8502432699567d01912c680f4be8492e390a3..d8b51533c0dff2dc22ef880b08244071456a4962 100644
--- a/src/components/hy-main/hy-main.scss
+++ b/src/components/hy-main/hy-main.scss
@@ -42,6 +42,7 @@
       @include breakpoint($extrawide) {
         display: block;
         border-right: 2px dotted var(--grayscale-medium);
+        display: block;
         max-width: 320px;
         order: 1;
         padding: var(--gutter-extrawide);
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 3f1bef04db8e8c5dea490a68bdea9e14342af52e..1a82cd624c5e07647ad6edfaf018ff2f0fba8490 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -22,7 +22,6 @@
 - [hy-footer-action](../footer/hy-footer-action)
 - [hy-footer-base](../footer/hy-footer-base)
 - [hy-footer-link-item](../footer/hy-footer-link-item)
-- [hy-hero](../hy-hero)
 - [hy-introduction](../hy-introduction)
 - [hy-link-box](../link-box)
 - [hy-menu-item](../navigation/menu-item)
@@ -48,7 +47,6 @@ graph TD;
   hy-footer-action --> hy-icon
   hy-footer-base --> hy-icon
   hy-footer-link-item --> hy-icon
-  hy-hero --> hy-icon
   hy-introduction --> hy-icon
   hy-link-box --> hy-icon
   hy-menu-item --> hy-icon
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index e1f222937180515e8c485e4c06cf177f94778258..71da362e3bc384ff88e7af9095f8d7406fe2644c 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -9,6 +9,8 @@
   display: flex;
   flex-flow: row;
   place-content: center space-between;
+  position: relative;
+  z-index: 99;
 
   @include breakpoint($medium) {
     align-content: center;
diff --git a/src/index.html b/src/index.html
index 59857cdf2c0117fdf64acc7c355f052856c31b11..cd2a5c5fc1f26c66bceb61fee1d4e4639e2ea03c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -171,8 +171,8 @@
         <hy-hero
           color-variant="blue"
           image="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/ambassadors_toolo_4_1920x1080_original_hero_valoisampi.jpg"
-          heading="Congratulations to our new students"
-          description="University of Helsinki is ranged high in comparison with the worlds research universities."
+          heading="Become a part of our fantastic cheerful team"
+          description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient."
           url="https://www.helsinki.fi/fi/uutiset"
           url-title="See latest publications"
           sc-label="Aria label"
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 5b2c68b2b70afd7dc4d49826457ec50b81d5f8a8..7a2b0cbe8d23345111cd7bc0c7e340fa8c9be22b 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -48,6 +48,8 @@ export enum CtaLinkButtonVariants {
   default = 'default',
   onBlueBkgd = 'blue-background',
   onWhiteBkgd = 'white-background',
+  onBlackBkgd = 'black-background',
+  onTransparentBkgd = 'transparent-background',
 }
 
 export enum ProcessFlowBoxVariants {