Build a horizontal navigation bar with flexbox: logo on the left, a flexible spacer, and a group of three links on the right. The links should stay together.

Build a responsive 3-column grid that gracefully collapses to 1 column on narrow screens, without writing any media queries. Use repeat, auto-fit, and minmax.

Build a magazine-style 4-column grid where the hero article spans 2 columns and 2 rows. Show the grid-area style of placement.

Why is the gap property a better choice than margins between flex or grid items? Mention one bug gap avoids.