Soft Case Study Cards Layout for Divi 5: Project Grid

The section sits on a #f5f6ff background, a barely-there lavender tint that reads as near-white yet adds just enough coolness to separate the block from a plain white page. Section padding is 104px top and bottom on desktop, stepping down to 72px on tablet and 48px on phone, so the generous breathing room scales proportionally rather than feeling cramped at smaller breakpoints.

The header is a flex row with justify-content: space-between and align-items: flex-end, placing the title stack on the left and a ghost button on the right, both sitting on the same visual baseline. The eyebrow is a 13px Figtree uppercase label in muted indigo-slate (#596083) with 1px letter-spacing, a type signal that frames the section without competing with the h2. The headline uses Plus Jakarta Sans at 44px, 700 weight, and -1px letter-spacing with text-wrap: balance applied, which prevents orphaned words at any viewport width. It steps down to 36px on tablet and 30px on phone. On phone the header row reflows to a column, left-aligned, so the button drops naturally below the headline.

The project grid is a native CSS grid with two columns, 32px column gap, and 40px row gap on desktop. The first card is assigned grid-column-span: 2, making it a full-width featured piece at a 2:1 aspect ratio, wider than the four standard cards beneath it, which all use 4:3. That asymmetry gives the grid a clear visual anchor: one statement project, four supporting pieces. On phone the grid collapses to a single column with a tighter 32px row gap, and the featured card's span resets to 1 automatically. All five images carry 16px corner radii and object-fit: cover, so any photo crops cleanly regardless of its original dimensions.

Below each image, a flex row with justify-content: space-between places the project title on the left and a small pill tag on the right. Titles are h3 at 22px Plus Jakarta Sans (600 weight), scaling to 20px on tablet and 19px on phone. The pill uses a 1px #e0e3f5 border and 12px corner radius, visible but quiet. Tag text is 12px Figtree, uppercase, 1px letter-spacing, in the same #596083 as the eyebrow, creating a consistent secondary-type register that recurs across header and card without feeling repetitive.