# background-color

The markup of every demo on <https://kuiper.oeds.it/background-color/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## background-color

Varies: `text-*` over 15 color roles.

```html
<div class="grid-xs grid-collapse" data-grid>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white">white</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-medium">w. medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-dark">w. dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-xdark">w. xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-2xdark">w. 2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-3xdark">w. 3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-4xdark">w. 4xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-5xdark">w. 5xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-white-6xdark">w. 6xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-3xlight">g. 3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-2xlight">g. 2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-xlight">g. xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-light">g. light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-medium">gray</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-dark">g. dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-xdark">g. xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-2xdark">g. 2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-gray-3xdark">g. 3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-6xlight">b. 6xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-5xlight">b. 5xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-4xlight">b. 4xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-3xlight">b. 3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-2xlight">b. 2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-xlight">b. xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-light">b. light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black-medium">b. medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-left text-truncate text-xs background-black">black</div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight">6xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight">5xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight">4xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-gray">gray</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-gray-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-gray">gray</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span>black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark">4xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark">5xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark">6xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span>white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-muted-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-muted">muted</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-primary-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-primary">primary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-secondary-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-secondary">secondary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-tertiary-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-tertiary">tertiary</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-danger-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-danger">danger</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-warning-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-warning">warning</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-accent-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-accent">accent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-success-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-success">success</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-info-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-info">info</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-action-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-action">action</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-urgent-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-urgent">urgent</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
 <div class="width-expand">
  <div class="card">
   <div class="grid-xs grid-collapse" data-grid>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-6xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-5xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-4xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-3xdark"><span class="text-black">black</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-2xdark"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-xdark"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-dark"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white-medium"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-white"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-3xlight">3xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-2xlight">2xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-xlight">xlight</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-light">light</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-medium">medium</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-dark">dark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-xdark">xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-2xdark">2xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-emphasis-3xdark">3xdark</div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-medium"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-light"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-xlight"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-2xlight"><span class="text-emphasis">emphasis</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-3xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-4xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-5xlight"><span class="text-white">white</span></div></div>
    <div class="width-1-1"><div class="card padding-5xs-horizontal padding-4xs-vertical text-center text-truncate text-xs background-black-6xlight"><span class="text-white">white</span></div></div>
   </div>
  </div>
 </div>
</div>
```