Container-responsive

Container-responsive (no media queries, no JS)

Make one component render differently by width of its own box:

1. Put .container on a wrapper (it sets container-type: inline-size).
2. Give a child both a gate class and a layout primitive: class="medium column". The gate class (in the media layer) hides it with display:none out of band; in band it becomes display: revert-layer, which restores the value from the earlier layer — i.e. .column's flex. The primitive is load-bearing: a bare .medium with no composed display reverts to default block, not hidden.

Two container gate families, two jobs: .small/.medium/.large are density tiers (component scale: .small < 8rem = glyph alone, .medium 8rem–20rem = glyph + label, .large ≥ 20rem = full block; "and-up" via multi-class class="medium large"). .c-mobile/.c-tablet/.c-desktop are the layout band family (576px / 768px, container-measured).

<button class="column">                 <!-- a day cell -->
  <b data-text="cellDay(v,i)"></b>
  <span class="medium large column">…2 chips…</span>  <!-- glyph+label and up -->
  <span class="large column">…3 chips…</span>         <!-- full block only -->
</button>

No @container rule in your CSS — the framework already gates both families.