Images grid

[cogniSyb]

Called gallery in the design, and serving the same function as Volvo Trucks' images-grid.

Requirements

• The section will start with a heading containing a marker
• Images will be placed in the same masonry grid on all viewports
• Images are either square or landscape
• On mobile, the gap between images is 8px
• On desktop, the gap between images is 16px
• A caption text will be shown on desktop, in capitals shown on a graphite background
• Automatically transform the text to all caps
• Assumption: there is a long list of assets, we only show the first 4 assets in a grid, and the others when clicking on the image, show in a lightbox with a carousel (separate issue Images grid carousel #38 )
• For the MVP, we will have the same caption on grid and lightbox view.

Technical hint

• Proposal: Use the fig caption tag
• Redo the document containing the assets, to allow multiple assets, but only display the first 4

This block will be expanded with #38

[Andrei-Boiangiu]

NOTE:
some of the pixel values from the figma design vs the PR branch differ

for ex you will find
351px on the figma design vs 344.86px on the PR
335px on figma vs 326.859px on the PR

as discussed with @cogniSyb , the current values on the PR are correct as the images are now shown always in a square box, or a rectactle box with an aspect ration of 4/3 and that it was confirmed there would be some pixel rounding issues

[Andrei-Boiangiu]

confirmed as done with the above mention regarding pixel values