tailwind1-7  Exercise 2: One Card, Two Places, Two Layouts
==========================================================

The card (the same markup is used in both places):

<article class="@container">
  <div class="flex flex-col gap-2 @md:flex-row">
    <div class="h-24 bg-blue-200 @md:w-40 @md:shrink-0"></div>   <!-- the image -->
    <div class="flex-1">Text</div>
  </div>
</article>

  @container                      makes the article a query container (container-type: inline-size)
  flex flex-col gap-2             the narrow layout: image above text, 8px apart
  @md:flex-row                    when the container is at least 28rem (448px) wide: image and text side by side
  @md:w-40 @md:shrink-0           ...and the image becomes a fixed 160px column that does not shrink

The page (1200px wide):

<div class="mt-4 flex gap-4">
  <section class="w-[700px] shrink-0"> ...the card... </section>
  <aside class="w-[300px] shrink-0"> ...the same card... </aside>
</div>

Measure (console or DevTools Computed):

  const inner = id => getComputedStyle(document.getElementById(id));
  console.log(inner('cmInner').flexDirection, inner('csInner').flexDirection);

Measured in headless Chrome, viewport 1200px:

  main column  (container 700px):  flex-direction row,    image 160px wide
  sidebar      (container 300px):  flex-direction column, image 300px wide (it fills the container)

WHY THIS WORKS AS AN ANSWER
---------------------------
The 700px container is above the @md threshold (28rem = 448px), so the card switches to a row. The 300px sidebar is below it, so the card keeps the stacked layout, and the image, a block in a
column, stretches to the full 300px. The card contains no information about where it is used: the same class list adapts to each box.
With md: instead of @md:, both cards would use the SCREEN width. The viewport is 1200px, above md's 768px, so both would switch to a row. In the sidebar that would leave 300 - 160 - 8 =
132px for the text beside a 160px image (by arithmetic; I measured the container-query version, and the screen-breakpoint behaviour in the chapter's own comparison). A screen breakpoint
cannot know that the card was placed in a narrow column; a container query can.