Container Queries

Make the window one pixel wider, from 600 to 601 pixels, and each text column of the chapter's page becomes narrower, not wider. At 600 pixels the mobile-first rules stack the columns, and each one is 485.6 pixels wide. At 601 pixels the second column appears, and each one is only 233 pixels wide. Anything placed inside a column therefore gets less room at the moment the window gets more.

A media query cannot see this, because it asks only about the window. A container query asks about the box that contains an element instead, and this lesson uses one to lay out a small card.