key highlight, tablet mode

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

@@ -16,6 +16,33 @@
     justify-content: left;
     max-width: 100%;
   }
+
+  .box,
+  .box-4 {
+    flex: none;
+    padding: 0;
+
+    @include breakpoint($wide) {
+      flex: 1;
+      padding-right: 22px;
+    }
+  }
+
+  .box-4 {
+    @include breakpoint($medium) {
+      flex-grow: 1;
+      max-width: 49%;
+      padding-right: 22px;
+      width: 49%;
+    }
+  }
+
+  .box {
+    @include breakpoint($medium) {
+      flex: 1;
+      padding-right: 22px;
+    }
+  }
 }
 
 .hy-key-highlight-block::after {

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

@@ -32,10 +32,20 @@ export class HyKeyHighlightGroup implements ComponentInterface {
   render() {
     const classAttributes = [this.variant, 'hy-key-highlight-group'].join(' ');
 
+    const dataItemCount = this._dataItems.length;
+    const classItem = dataItemCount % 4 == 0 ? 'box-4' : 'box';
+
     return (
       <div class={classAttributes}>
         {this._dataItems.map((x) => {
-          return <hy-key-highlight variant={this.variant} heading={x.heading} description={x.description} />;
+          return (
+            <hy-key-highlight
+              class={classItem}
+              variant={this.variant}
+              heading={x.heading}
+              description={x.description}
+            />
+          );
         })}
       </div>
     );

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

 :host {
-  flex: none;
-  padding: 0;
-
-  @include breakpoint($medium) {
-    flex: 1;
-    padding-right: 22px;
-  }
 }
 
 .hy-key-highlight {