Elegant Coaching Three-Pillar Cards Layout for Divi 5

The section opens with a centered intro block — a copper eyebrow in Outfit uppercase, letter-spaced 3px, sitting above a large Cormorant Garamond h2 that steps from 48px on desktop down to 36px on tablet and 30px on phone. A supporting paragraph is capped at 680px so the line length stays comfortable regardless of container width. Underneath, three equal cards sit in a 1_3, 1_3, 1_3 row with a 32px column gap and stretch alignment, so their heights lock together on desktop without any manual matching.

Each card is a white surface with a 20px corner radius, 40px vertical padding, and a preset3 box shadow (12px offset, 32px blur, −6px spread) that deepens on hover as the whole card translates up by 6px — a small, considered movement rather than a flashy animation. Inside every card the same rhythm repeats: a 22px circular icon medallion, an h3 pillar name in Cormorant Garamond 600 at 26px, and a short paragraph in Outfit 16px with 1.7em line-height. The icon fills alternate — dark forest #2B3A36 for cards one and three, copper #A0784A for card two — so the eye finds a natural center without any extra "featured" plate treatment on the middle card.

The palette holds the whole thing together: a warm sand #F4EEE6 wash for the section, white cards for lift, two greens (#1F2A28 for headings, #2B3A36 for icon backs) for gravity, and a single copper accent (#A0784A) that ties the eyebrow, the middle icon, and the brand voice into one line. On tablet the row wraps with a 24px column gap and 24px row gap; on phone the flex direction switches to column and the section's padding relaxes to 64px vertical / 20px horizontal so the stacked cards breathe instead of crowding the edges.