The grid is 12 columns with 20px gutters.
The width of a grid column varies depending on the number of gutters used in a row. Eg. 1/3 has different proportions when it's used as 1/3 + 1/3 + 1/3 vs. 1/3 + 2/3s.
Image widths are calculated as:
Gutters = 20px * (number of images - 1)
Single column = (1400px - gutters) ÷ 12
Image width = single column * column span
1/3 + 1/3 + 1/3:
Gutters: 20px * 2 = 40px
Single column: (1400px - 40px) ÷ 12 = 113.3px
Image width (1/3): 113.3px * 4 = 453.3px
1/3 + 2/3:
Gutters: 20px * 1 = 20px
Single column: (1400px - 20px) ÷ 12 = 115px
Image width (1/3): 115px * 4 = 460px
Image width (2/3): 115px * 8 = 920px
Round up or down if an image width is not a full pixel, alternating up/down to reach the correct total width. Eg.
1400px - 40px = 1360px
453.3px + 453.3px + 453.3px = 1360px
453px + 454px + 453px = 1360px
For sub-columns (a row inside a row), change 1400px to whatever the width of the parent column is.
Images can be any height.
When exporting images, lock the ratio and set the width to 800px minimum.
Images should be saved as .jpg @ 70% quality.