.numbered-list {
  list-style: none;
  counter-reset: list-counter;
  margin-left: 0;
  padding-left: var(--sl-spacing-medium);

  li {
    counter-increment: list-counter;
    margin-bottom: var(--sl-spacing-small);

    &::before {
      --size: 1.5em;
      font-size: var(--sl-font-size-x-large);

      content: counter(list-counter);
      background-color: var(--tblr-bg-surface-secondary);
      color: var(--tblr-emphasis-color-inverse);
      border-radius: 100%;
      display: inline-block;
      text-align: center;

      width: var(--size);
      height: var(--size);
      line-height: var(--size);
      margin-right: var(--sl-spacing-small);
      vertical-align: middle;
    }
  }
}

.icon-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--sl-spacing-2x-large);
  /* margin: var(--sl-spacing-2x-large) 0; */

  li {
    display: flex;
    align-items: start;
    margin:0;

    i {
      font-size: var(--sl-font-size-2x-large);
      margin-right: var(--sl-spacing-small);
      margin-top: -0.3em;
      color: var(--sl-color-amber-500);
    }
  }
}

.status-icon-list {

  margin-block: var(--sl-spacing-2x-large);
  padding:0;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: var(--sl-spacing-2x-large);

  li {
    flex: 1 1 20%;
    list-style: none;
    text-align: center;
    padding: 0;

    font-size: var(--sl-font-size-medium);

    border-block: 4px solid var(--tblr-border-color);
    padding-block: var(--sl-spacing-medium);
  }

  .title {
    font-size: var(--sl-font-size-large);
    margin-bottom: var(--sl-spacing-small);
  }

  span {
    position: relative;
    display:inline-block;
  }

  i:first-child {
    font-size: var(--sl-font-size-2x-large);
    margin-bottom: var(--sl-spacing-2x-small);
    color: var(--tblr-emphasis-color);
    margin-right: var(--sl-spacing-small);
    border-radius: 100%;
    background-color: var(--tblr-bg-surface-secondary);
    width: var(--sl-font-size-4x-large);
    aspect-ratio: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  i:last-child {
    position: absolute;
    bottom: 0;
    right: 0.5em;
    color: var(--tblr-secondary);
    font-size: var(--sl-font-size-large);

    &[class*="-check-"] {
      color: var(--sl-color-green-600);
    }

    &[class*="-x-"] {
      color: var(--sl-color-red-600);
    }
  }
}