.gl-attribute-list {
  @apply gl-text-base;
  @apply gl-leading-16;
  @apply gl-grid;
  @apply gl-gap-x-7;
}

.gl-attribute-list-horizontal-items {
  @container (min-width: 25rem) {
    grid-template-columns: fit-content(15rem) 1fr;

    .gl-attribute-list-item {
      @apply gl-col-span-2;
    }
  }

  @container (min-width: 54rem) {
    grid-template-columns: repeat(2, fit-content(15rem) 1fr);
    @apply gl-grid-flow-col;
    grid-template-rows: repeat(var(--attribute-list-row-count), auto);
  }
}

.gl-attribute-list-vertical-items {
  @container (min-width: 40rem) {
    @apply gl-grid-cols-2;
    @apply gl-grid-flow-col;
    grid-template-rows: repeat(var(--attribute-list-row-count), auto);
  }
}

.gl-attribute-list-item {
  @apply gl-border-b;
  @apply gl-py-5;
  @apply gl-gap-4;
  @apply gl-grid;
  @apply gl-grid-cols-subgrid;
}

.gl-attribute-list-item-label {
  @apply gl-text-strong;
  @apply gl-flex;
  @apply gl-gap-3;
}

.gl-attribute-list-item-label-icon {
  @apply gl-flex-none;
}

.gl-attribute-list-item-description {
  @apply gl-mb-0;
  @apply gl-min-w-0;
  @apply gl-text-default;
}