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

<style>
  .character-colors {
    --columns: repeat(auto-fit, minmax(15em, 1fr));
    --clearance: 0.25rem;
    --color-box-size: calc(var(--clearance) * 14);

    display: grid;
    grid-template-columns: var(--columns);
    gap: 0.75em;

    margin-block: 2em;
    padding: 0;

    @media (min-width: 35em) {
      --color-box-size: 5em;
      --columns: repeat(auto-fit, minmax(8em, 1fr));
    }

    & .color {
      --areas: 'color heading' 'color value';
      --rows: repeat(2, 1fr);
      --columns: var(--color-box-size) 1fr;

      display: grid;
      grid-template-areas: var(--areas);
      grid-template-rows: var(--rows);
      grid-template-columns: var(--columns);

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

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

      overflow: clip;

      @media (min-width: 35em) {
        --areas: 'color' 'heading' 'value';
        --rows: var(--color-box-size) 1fr auto;
        --columns: 1fr;
      }
    }

    & .color-box {
      grid-area: color;
      width: 100%;
      height: 100%;
    }

    & .heading,
    & .value {
      text-align: left;
      margin: 0;
      padding-block: calc(var(--clearance) * 2);
      padding-inline: calc(var(--clearance) * 2);
    }

    & .heading {
      grid-area: heading;
      align-self: start;

      font-size: 0.625em;
      line-height: 1.2;
      color: var(--clr-heading-data);
      text-transform: uppercase;

    }

    & .value {
      grid-area: value;
      align-self: end;

      font-size: 0.75em;

      padding-block: 0 calc(var(--clearance) * 2);
    }
  }
</style>
