PNI: differences between picture background and css background

[taisdesouzalessa]

Describe the bug
There is a small difference of color between the css and the image background on the PNI page, which results in a faint square around the image:

URL here: https://foundation.mozilla.org/en/privacynotincluded/

Expected behavior
To have the same color.

Additional context
Changing the class ".bg-gray" to #f5f5f5 solves the issue but I am not sure about how this affects other pages.

[taisdesouzalessa]

@kristinashu tagging you for triage. Let me know if I should tag Alan instead? Or Gideon?

[kristinashu]

Thank you Tais! I've put it in the upcoming milestone.

[mmmavis]

The container background colour #f2f2f2 is a brand color $gray-05. It looks like PNI product images were generated with #f5f5f5 as background. Since regenerating all the images is time-consuming and troublesome, as the simplest solution I can update the container background to #f5f5f5.

[kristinashu]

Note that the background color used on the product detail page works well with the images
https://foundation.mozilla.org/en/privacynotincluded/products/nintendo-switch/

[taisdesouzalessa]

The product detail page bkg color is #f4f4f4

I would advocate for the simpler solution Mavis pointed out because it eliminates the issue quickly and the difference between the brand color and the grey we currently have is so small.
Then update the images next year with the grey on brand. @kristinashu - what do you think?