Romaji to Kana Converter: Astro — Chapter 6, Exercise 3
=====================================================================

TASK
Resize your browser window slowly across the 600px breakpoint (or use
devtools' device toolbar) while the hiragana/katakana output boxes
are visible, and confirm you observe the real transition this chapter
describes -- side by side above 600px, stacked below it.

SOLUTION

With the .output-grid CSS and its @media (max-width: 600px) rule in
place from the chapter, resizing a real browser window (or setting a
custom width in devtools' device toolbar) and watching either
converter card's own two output boxes shows:

  Above 600px wide: the Hiragana box and the Katakana box sit side by
  side, in two equal columns, since grid-template-columns: 1fr 1fr
  is in effect.

  At and below 600px wide: the layout switches to a single column,
  with the Hiragana box stacked directly above the Katakana box, once
  the media query's own grid-template-columns: 1fr rule takes over.

The transition happens instantly at exactly 600px, with no gradual
shrinking of the two columns beforehand -- CSS Grid's
grid-template-columns value doesn't interpolate between the two
states, it simply switches to whichever rule the current viewport
width matches.

WHY THIS WORKS AS AN ANSWER
----------------------------
It confirms the real, observed layout behavior at both sides of the
breakpoint by actually resizing a browser rather than just trusting
the CSS should work, and correctly notes the transition is a hard
switch at the breakpoint rather than a gradual one -- an accurate
detail about how CSS Grid's own template-column values actually
behave, not just a restatement of the chapter's own claim.