/* https://codepen.io/dragontheory/pen/bNGgZYZ?editors=1100 */

/* MARK: TABLES
*/
@layer tables {

  .list ul>li {
    padding: 0.5rem;
  }

  .list ul>li:not(:nth-child(4)) {
    white-space: nowrap;
  }

  /* big */
  @media screen and (min-width: 45rem) {
    .list {
      display: table;
      margin: 1em;
    }

    .list ul {
      display: table-row;
    }

    .list ul li {
      padding-inline-start: 1rem;
    }

    ul:first-child li {
      background-color: color-mix(in srgb, currentColor 10%, transparent);
    }

    .list ul>li {
      display: table-cell;
    }
  }

  /* small */
  @media screen and (max-width: 44.99rem) {
    .list ul {
      border: solid 0.063rem color-mix(in srgb, currentColor 25%, transparent);
      display: grid;
      list-style: none;
      margin: 1em;
      padding: 0.5em 1em;
    }

    /*   .list ul:first-child {
    display: none;
  } */

    .list ul>li {
      display: block;
      padding: 0.25em 0;
    }

    .list ul:nth-child(odd)>li+li {
      border-top: solid 0.063rem color-mix(in srgb, currentColor 25%, transparent);
    }

    .list ul:nth-child(even)>li+li {
      border-top: solid 0.063rem color-mix(in srgb, currentColor 25%, transparent);
    }

    .list ul>li:before {
      color: color-mix(in srgb, currentColor 50%, transparent);
      content: attr(data-label);
      display: inline-block;
      font-size: 75%;
      font-weight: bold;
      text-transform: capitalize;
      vertical-align: top;
      width: 50%;
    }

    .list p {
      margin: -1em 0 0 50%;
    }
  }

  /* tiny */
  @media screen and (max-width: 21.813rem) {
    .list ul>li:before {
      display: block;
    }

    .list p {
      margin: 0;
    }
  }

  h3 {
    padding-block-start: 1rem;
    padding-inline-start: 1rem;
  }
}