hy-general-list.scss

:host {
  display: block;
}

.hy-general-list {
  list-style: none;
  margin: 0;
  padding: 0;

  &--style-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 22px;

    @include breakpoint($narrow) {
      flex-direction: row;
    }

    @include breakpoint($wide) {
      flex-direction: row;
    }

    li {
      width: 100%;
      height: 100%;

      @include breakpoint($medium) {
        width: calc(100% / 2 - 22px);
      }

      @include breakpoint($wide) {
        width: calc(100% / 3 - 22px);
      }
    }
  }
}