Đề bài: [Thiết kế Web] Bố cục tạp chí 3 mức đáp ứng

Cho HTML sau (khối .magazine chứa header, .featured (bài nổi bật), .article-a, .article-b, .article-c, sidebar).

Viết CSS dùng grid-template-areas với 3 mức breakpoint:

1. Mặc định (>1000px, desktop): header trên cùng chiếm hết; hàng giữa gồm .featured (2 cột) + .article-a (1 cột) ở trên, .article-b + .article-c + sidebar chia 3 cột đều ở hàng dưới, tổng cộng lưới 3 cột.
2. Từ 700px đến 1000px (tablet): header trên cùng; .featured chiếm hết 1 hàng riêng; .article-a, .article-b xếp 2 cột 1 hàng; .article-c và sidebar xếp 2 cột 1 hàng tiếp theo (lưới 2 cột).
3. Dưới 700px (mobile): tất cả xếp chồng 1 cột theo thứ tự header, featured, article-a, article-b, article-c, sidebar.

Dùng grid-template-areas riêng cho mỗi breakpoint, gap 12px xuyên suốt.