@layer components {
  /* A project's picture: a small flat-radius square that stands beside the
     name, never over it. The CSS does the cropping — no variant processing to
     depend on. */
  .cover {
    inline-size: 3rem;
    block-size: 3rem;
    object-fit: cover;
    border-radius: var(--border-radius);
  }

  .cover--large {
    inline-size: 6rem;
    block-size: 6rem;
  }
}