Problem description

Create a .magazine container with five article cards: feature, primary1, primary2, secondary1, and secondary2.

Layout requirements include the following:

• Mobile (<480px): Single-column flow in source order (feature → primary1 → primary2 → secondary1 → secondary2).

• Tablet (480px–768px): Two-column grid includes the following:

  • feature spanning full width on top

  • Below, two columns of equal size with primary and secondary cards stacked vertically in each column

• Desktop (≥768px): Asymmetrical mosaic layout includes the following:

  • feature spanning two columns and two rows

  • primary1 and primary2, each spanning one column and one row alongside feature

  • secondary1 and secondary2 occupying smaller cells below, forming a visually interesting mosaic

Goal

Write CSS in styles.css using grid-template-areas and fractional units to define the asymmetric mosaic layout at each breakpoint without JavaScript.

Constraints

• Use CSS Grid with named grid areas.

• Define two breakpoints: 480px and 768px.

• Set the gap to 16px.

• The article cards include .feature, .primary1, .primary2, .secondary1, and .secondary2.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.