<div>
  <h2>Dice</h2>
  <ol class="dice">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
  </ol>
</div>

<div>
  <h2>Dominos</h2>
  <ol class="dominos">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
  </ol>
</div>

 <div>
   <h2>Cards</h2>
   <ol class="cards">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
  </ol>
</div>

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style dominos {
  system: additive;
  additive-symbols: 10 "🂑", 9 "🂊", 8 "🂉", 7 "🂂", 6 "🁻", 5 "🂀", 4 "🁹", 3 "🁲", 2 "🁫", 1 "🁪";
  suffix: " ";
}

@counter-style cards {
  system: additive;
  additive-symbols: 10 "🂻", 9 "🃙", 8 "🂸", 7 "🃗", 6 "🂦", 5 "🂵", 4 "🃄", 3 "🂣", 2 "🂲", 1 "🂱";
  suffix: " ";
}

.dice li {
  list-style: dice;
}

.dominos {
  list-style: dominos;
}

.cards {
  list-style: cards;
}

@layer presentation {
  body {
    display: grid;
    font-size: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
    place-items: start center;
  }
  
  ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
  
  body {
    color: #fff;
    display: grid;
    font-family: system-ui;
    margin: 0;
    overflow-x: hidden;
  }
}