コンテナクエリでレスポンシブに変化！カードUI実験場

Create an interactive playground demonstrating CSS Container Queries. The page should have a container with resizable width (via slider or dragged handle), and cards inside that change layout based on the container's width (not the viewport). Include at least two breakpoints (e.g., card width < 300px: stacked vertical layout; >= 300px: horizontal row with image left; >= 500px: horizontal with larger thumbnail and text). Use container-type: inline-size, container-name, and @container rules. Add a small preview panel showing current container width. Use a clean, modern design with subtle colors. No JS framework, pure HTML/CSS/JS.