<ul class="character-colors">
  <li class="color" webc:for="color of colors">
    <div class="color-box" @attributes="({ style: `background-color: ${color.value}`})"></div>
    <div class="content">
      <p class="heading" @text="color.name"></p>
      <p class="text" @text="color.value"></p>
    </div>
  </li>
</ul>

<style>
  .character-colors {
    --color-box-size: 5.5em;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
    gap: 1em;

    margin-block: 2em;
    padding: 0;

    & .color {
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: 1.5fr 1fr;

      background-color: var(--clr-color-box-background);

      border: var(--border-thin) solid var(--clr-box-border);
      border-radius: 0.5em;

      overflow: hidden;
    }

    & .content {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-between;
      gap: 0.25em;
      height: 100%;
      padding: 0.5em;
    }

    & p {
      margin-block: 0;
    }

    & .heading {
      flex: 1 0 auto;
      font-size: 0.625em;
      line-height: 1.2;
      color: var(--clr-heading-data);
      text-transform: uppercase;
      text-align: left;
    }

    & .text {
      flex: 0 0 auto;
      font-size: 0.75em;
      margin-inline: 0;
    }
  }
</style>
