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: flex-start;
    gap: 22px;

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

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

    li {
      background-color: var(--grayscale-background-box);
      width: 100%;
      height: auto;

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

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

  &--with-sidebar {
    &.hy-general-list--style-grid {
      gap: 22px;

      @include breakpoint($narrow) {
        gap: 24px;
      }

      li {
        @include breakpoint($narrow) {
          width: calc(100% / 2 - 24px);
        }

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