.faces
  - let i = 1;
  - while (i < 100)
    - var n = Math.floor(Math.random() * 10 + 1);
    div(id=`face-${i}` class="face" data-size=n)
    - i++;

.faces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.face {
  width: 100%
  aspect-ratio: 1 / 1;
  
  &[data-size="5"] {
    grid-column: span 2;
    grid-row: span 2;
    scale: 1.2;
  }
  &[data-size="2"] {
    grid-column: span 2;
    grid-row: span 2;
    scale: 1.3;
  }
  &[data-size="7"] {
    grid-column: span 2;
    grid-row: span 2;
    scale: 1.1;
  }
}

body {
  background: radial-gradient(red, yellow);
}

import { display, generate } from "https://esm.sh/facesjs";

for (let i = 1; i < 100; i++) {
  const face = generate();
  // { body: { color: "blue" } }
  display(`face-${i}`, face);
}