Container queries, and the sidebar that stopped needing a class

A card that needed a --compact modifier wherever it appeared in a narrow column, applied by hand at every call site.

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

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

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

/* the modifier class, and its 18 call sites, deleted */

The component now responds to the space it is in rather than to the size of the window, which is what it always meant. container-type: inline-size establishes containment on the inline axis only — using size instead requires an explicit height and will collapse a block that relies on its content, which is the failure everybody hits first.