Problem: Overlapping Hero and Feature Cards Layout

hard

40 min

Try to build a responsive layout with a full-width hero that overlaps feature cards using CSS Grid and z-index, adapting structure and overlap depth across breakpoints.

Problem description

Design a layout with:

A .hero section spanning full width and overlapping the content area.
Four .card feature elements arranged in a 2×2 grid beneath the hero.

Requirements are as follows:

Mobile (< 600px): .hero full width above card stack (single column)
Tablet (600px–900px): .hero spanning two columns; cards in a 2×2 grid below, with hero bottom edge overlapping top cards by 20px
Desktop (> 900px): .hero spanning three columns, cards arranged in a 4-column row and hero overlapping the first row of cards by 40px.

Goal

Write CSS in styles.css to set up grid areas, implement overlap with negative margins or transform, use z-index for stacking, and adjust grid-template configurations via media queries.

Constraints

Use CSS Grid for layout and positioning.
No JavaScript is allowed.
Use z-index and transform or negative margins for overlap.
Set the gap to 16px.
Image backgrounds can be simulated with background-color.

Sample visual output

Here’s what the output would look like: