用CSS @container 实现真正响应式的卡片组件，不再依赖视口宽度

媒体查询（@media）一直是响应式布局的标配，但它解决的是视口宽度变化带来的适配问题。当一个卡片组件既可能出现在宽度 1200px 的主内容区，也可能塞进 320px 的侧边栏时，@media 就无能为力了：同一个组件在不同容器里需要不同的内部布局，而视口宽度根本看不出这层差异。过去我们通常靠给不同场景写两套 class（比如 .card--compact 和 .card--wide），或者在