@layer components {
  /* ——— A mosaic of pictures ———
     Small squares under one radius with hairline gaps, no names: a folder's
     tile holds two rows of three, the Docs & Files card on the dock three
     rows of four. A caller retunes the count, never the look. */
  .mosaic {
    --mosaic-columns: 3;
    --mosaic-rows: 2;

    display: grid;
    flex: 1;
    grid-template: repeat(var(--mosaic-rows), minmax(0, 1fr)) / repeat(var(--mosaic-columns), minmax(0, 1fr));
    gap: var(--border-size);
    min-block-size: 0;
    border-radius: var(--border-radius);
    overflow: clip;

    img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* A place no picture fills yet: the surface, so the mosaic keeps its shape. */
  .mosaic__empty {
    background-color: var(--color-surface);
  }
}