コンテナで変わる！CSS Container Queriesで作るレスポンシブカード

Create a web page demonstrating CSS Container Queries with a card component that changes layout based on its container's width (inline-size). Use a grid of cards, each containing an image (placeholder), a title, and a description. The card should switch from horizontal (image left, text right) to vertical (image on top, text below) when the container is below 300px. Use container-type: inline-size and @container (max-width: 300px). Style with modern CSS (CSS custom properties, smooth transitions). Add a toggle button to shrink the parent container width to trigger the query. Include minimal JS for toggle and container resize.