key highlitght component and its style

src/components/hy-key-highlight-group/hy-key-highlight-group.scss

@@ -3,9 +3,19 @@
 }
 
 .hy-key-highlight-group {
-  display: flex;
-  flex-wrap: wrap;
+  display: block;
+  justify-content: center;
+  max-width: 30rem;
+  margin-right: auto;
+  margin-left: auto;
   width: 100%;
+
+  @include breakpoint($medium) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: left;
+    max-width: 100%;
+  }
 }
 
 .hy-key-highlight-block::after {

src/components/hy-key-highlight/hy-key-highlight.scss

 :host {
-  //display: block;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  padding: 0 22px 0 0;
+  flex: none;
+  padding: 0;
+
+  @include breakpoint($medium) {
+    flex: 1;
+    padding-right: 22px;
+  }
 }
 
 .hy-key-highlight {
-  &__title-container {
-    &__title {
-      background-color: var(--brand-main-light);
-      color: var(--grayscale-white);
-      display: inline;
-      font-family: var(--main-font-family);
-      font-weight: 600;
-      letter-spacing: -0.75px;
-      margin-bottom: 8px;
-      padding: 4px 10px;
+  display: block;
+  margin-bottom: 20px;
+  width: 100%;
+
+  @include breakpoint($medium) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  &__title__container {
+    margin-bottom: 10px;
+    position: relative;
+    text-align: center;
+
+    @include breakpoint($medium) {
+      text-align: left;
     }
   }
 
-  &__description {
-    color: var(--grayscale-dark);
+  &__title,
+  &__overlay {
+    box-decoration-break: clone;
+    color: var(--grayscale-white);
+    display: inline;
     font-family: var(--main-font-family);
-    letter-spacing: 0;
+    font-weight: 600;
+    letter-spacing: -0.75px;
+    padding: 4px 10px;
+    position: relative;
+    text-align: center;
+    z-index: 1;
+
+    @include breakpoint($medium) {
+      text-align: left;
+    }
+  }
+
+  &__overlay--container {
+    left: 50%;
+    transform: translate(-50%, 0);
+    opacity: 0.9;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    @include breakpoint($medium) {
+      left: 0;
+      transform: none;
+    }
+  }
+
+  &__overlay {
+    background: var(--brand-main-light);
+    color: transparent !important;
+    margin-bottom: 0;
+  }
+
+  &__description {
+    text-align: center;
+
+    @include breakpoint($medium) {
+      color: var(--grayscale-dark);
+      font-family: var(--main-font-family);
+      letter-spacing: 0;
+      text-align: left;
+    }
   }
 
   &.small {
-    .hy-key-highlight__title-container {
-      &__title {
-        font-size: 24px;
-        line-height: 24px;
-      }
+    .hy-key-highlight__title__container {
+      font-size: 24px;
+      line-height: 24px;
     }
     .hy-key-highlight__description {
       font-size: 14px;
       line-height: 20px;
     }
   }
+
   &.big {
-    .hy-key-highlight__title-container {
-      &__title {
+    .hy-key-highlight__title__container {
+      font-size: 24px;
+      line-height: 24px;
+
+      @include breakpoint($medium) {
         font-size: 40px;
         line-height: 40px;
       }
     }
+
     .hy-key-highlight__description {
-      font-size: 20px;
+      font-size: 14px;
       line-height: 20px;
+
+      @include breakpoint($medium) {
+        line-height: 20px;
+        font-size: 20px;
+      }
     }
   }
 }

src/components/hy-key-highlight/hy-key-highlight.tsx

@@ -16,8 +16,11 @@ export class HyKeyHighlight implements ComponentInterface {
 
     return (
       <div class={classVariant}>
-        <div class="hy-key-highlight__title-container">
-          <div class="hy-key-highlight__title-container__title">{this.heading}</div>
+        <div class="hy-key-highlight__title__container">
+          <div class="hy-key-highlight__title">{this.heading}</div>
+          <div class="hy-key-highlight__overlay--container">
+            <div class="hy-key-highlight__overlay">{this.heading}</div>
+          </div>
         </div>
         <div class="hy-key-highlight__description">{this.description}</div>
       </div>

src/index.html

@@ -28,16 +28,16 @@
     <hy-key-highlight-group
       variant="small"
       data-items='[{"heading":"Key Highlight title","description":"Key Highlight description text"},
-        {"heading":"Key Highlight title","description":"Key Highlight description text"},
-        {"heading":"Key Highlight title","description":"Key Highlight description text"},
+        {"heading":"Key Highlight title","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
+        {"heading":"Tervetuloa Helsingin yliopistoon! Lue miten pääset syksyllä aloittamaan opintosi sujuvasti. Tutustu myös opiskelijan ohjeisiin.","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
         {"heading":"Key Highlight title","description":"Key Highlight description text"}]'
     >
     </hy-key-highlight-group>
 
     <hy-key-highlight-group
       variant="big"
-      data-items='[{"heading":"Key Highlight title","description":"Key Highlight description text"},
-        {"heading":"Key Highlight title","description":"Key Highlight description text"},
+      data-items='[{"heading":"Key Highlight title","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris elit orci, ultricies id fermentum vel, porta et eros."},
+        {"heading":"Onnea uudet opiskelijat","description":"Key Highlight description text"},
         {"heading":"Key Highlight title","description":"Key Highlight description text"}]'
     >
     </hy-key-highlight-group>