Find the component’s real constraint
A project card can appear full-width on one page and in a narrow sidebar on another. A viewport media query sees the same browser width in both cases, even though the card has very different room. Container queries let the component respond to the space supplied by its surrounding layout instead.
Create a useful containment boundary
Wrap the component in an element with container-type:inline-size when you want to query its inline dimension. The component inside can then respond through an @container rule. Choose a wrapper whose size is determined by the surrounding layout. Applying containment without considering how that wrapper receives its width can produce an unexpectedly collapsed or constrained region.
Start with the narrow layout
Build the card as a vertical stack by default: image, title, description, then action. At an appropriate container width, change the inner card to a horizontal layout. For example, an @container rule above 34rem might allow a thumbnail beside the text. The component remains usable even when the query is unavailable or never matches.
Name containers when context gets complicated
Nested layouts can contain multiple queryable ancestors. A container name such as project-slot makes the intended boundary easier to identify. Use that name in the query when a generic nearest-container rule would be ambiguous. Names should describe a stable layout responsibility, rather than incidental page coordinates or a specific screen resolution.
Avoid moving the problem into typography
A horizontal card is only helpful if the image and text both have enough space. Test long titles and descriptions before increasing the number of columns. A smaller font should not be the automatic response to a cramped component. Often the correct behavior is to remain stacked longer and allow the card to grow vertically.
Test the component in several hosts
Place the same card in a wide content column, a sidebar and a two-column project grid. Resize those hosts independently when possible. Check that the chosen ancestor is the one being queried and that the fallback is complete. Container queries work best when they make a component less dependent on where it happens to be embedded.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.