Project 14 block design & features
The block opens with a centered uppercase heading at a very large scale, preceded by a small "Project" label. Two images in a two-column grid follow, each rendered in grayscale with a subtle hover scale effect. A centered metadata row displays category, year, and brand labels evenly spaced, followed by a centered body paragraph describing the project. A full-width hero image in a rounded container sits below, and a second two-column grayscale image grid closes the layout.
All images carry a CSS grayscale filter and a hover zoom that combines Framer Motion scale with a CSS scale transition. Typography is entirely uppercase with wide letter-spacing, giving the block a high-contrast editorial quality. Staggered fade-in-up animations control the entrance of every group. Rounded corners on the hero image soften the otherwise sharp geometry.
The aesthetic is monochrome and typographically driven, evoking automotive catalog design. The repetition of two-column grids above and below the descriptive section creates visual symmetry.
On smaller screens the two-column grids collapse to single columns and the metadata row wraps naturally.