<!-- Responsive by breakpoint, matched against the container. -->
<masonry-grid [options]="options()" (layoutComplete)="stats.set($event)">
  @for (card of cards(); track card.id) {
    <article masonryGridItem class="card">
      @if (card.image) {
        <!-- width/height reserve the space so the grid never jumps -->
        <img [src]="artwork(card.hue)" width="400" height="260" [alt]="card.title" />
      }
      <div class="card-body">
        <h2>{{ card.title }}</h2>
        <p>{{ card.body }}</p>
      </div>
    </article>
  }
</masonry-grid>

<!-- options() -->
{
  columns: { xs: 1, sm: 2, md: 3, xl: 4, '2xl': 5 },
  gutter: 16,
  entryAnimation: {},
}