Container queries style a component by the space it is given.

Media queries ask how wide the screen is. But a card in a narrow sidebar and the same card in a wide main column share one screen. A container query asks how wide the card's container is instead.

Give the parent container-type: inline-size and it becomes a container. Then @container (min-width: 300px) { … } styles what is inside it whenever that container is at least 300px wide.

Now one component works anywhere: it fits its slot, not the device.

<div class="slot wide"><div class="card"><b>Pickles</b><span>Cat, 3</span></div></div>
<div class="slot narrow"><div class="card"><b>Rex</b><span>Dog, 5</span></div></div>

.slot {
  container-type: inline-size;
}
.wide {
  width: 400px;
}
.narrow {
  width: 200px;
}
@container (min-width: 300px) {
  .card {
    display: flex;
    gap: 12px;
  }
}