Container queries on a component with two placements

A card written in 2023 with two layout branches, of which one had never rendered until January.

.card-slot { container-type: inline-size; }

.card { grid-template-columns: 1fr; }

@container (min-width: 30rem) {
  .card { grid-template-columns: 8rem 1fr; }
}

/* three years, every instance in a wide column, and
   the narrow branch unexercised until somebody put one
   in a sidebar. */

A branch that has never executed has never been verified, and this one happened to be correct — which is luck rather than evidence. The lesson is to render both branches in the component gallery deliberately, because a container query has two behaviours and only one is exercised by the pages that exist.