A media query knows the viewport, not the slot a component lands in: a desktop sidebar is as narrow as a phone. In intrinsic design, viewport breakpoints shape the page skeleton, auto-fit grids decide how many items fit, and container queries (@container) with cqi units (Relative Length Units) adapt each component to the width it receives. One card component, no media query:
<style>
body { font: 14px system-ui; display: grid; grid-template-columns: 1fr 170px; gap: 8px; }
.cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) }
.wide { grid-column: 1 / -1; }
.card { container-type: inline-size; }
.card div { display: grid; gap: 6px; padding: 8px; background: #e3f2fd; }
.card i { aspect-ratio: 3; background: #1565c0; }
.card b { font-size: clamp(0.9rem, 0.6rem + 3cqi, 1.4rem); }
@container (width > 22rem) { .card div { grid-template-columns: 12rem 1fr; align-items: center } }
</style>
<main class="cards"><div class="card wide"><div><i></i><b>Featured: side by side</b></div></div>
<div class="card"><div><i></i><b>Grid card: stacked</b></div></div>
<div class="card"><div><i></i><b>Grid card: stacked</b></div></div></main>
<aside class="card"><div><i></i><b>Sidebar card: smaller title</b></div></aside>
A container cannot query itself, hence the inner div. container-type: inline-size applies size containment, so the container's width must come from outside: in a shrink-to-fit context such as width: fit-content it collapses to zero. Outside any container, cqi falls back to small viewport units.