hy-key-highlight-group.scss

:host {
  display: block;
}

.hy-key-highlight-group {
  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%;
  }

  .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 {
  clear: both;
}