Problem description

Design a layout containing four sections: hero, features, testimonials, and footer.

• Desktop (≥ 1024px): Display hero spanning full width at the top, followed by features and testimonials side-by-side, and then the footer.

• Mobile (< 1024px): Reorder the layout so that testimonials appear immediately after hero, followed by features, and then the footer.

Goal

In the styles.css file, implement CSS Grid definitions and media queries to change grid areas and element order between desktop and mobile, emphasizing testimonials on mobile.

Constraints

• Use CSS Grid and CSS order only.

• Define two breakpoints, <1024px and ≥1024px.

• Do not use JavaScript.

• Set the layout gap to 20px.

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.