Replace static hero image by animation

[j08lue]

We are currently using a single frame from https://svs.gsfc.nasa.gov/5115.

We would like to replace this by a clip from that video, showing the northern hemisphere.

Does this require that all frames are processed? If this is way too much effort to produce, we should reconsider.

Acceptance criteria

• [ ] Hero image replaced by video / animation of same source

[faustoperez]

I have created a 20sec movie clip from the video above, and optimized it to a size of 7mb. It's has a dissolve effect to make the transition less evident when looping. It should be set to infinite loop.

https://github.com/NASA-IMPACT/veda-config-ghg/assets/12268629/ed59dc6e-1ec9-4e5c-a2a8-d31d128d2b42

It is not a direct drop, as we'll have position it to the bottom, apply blending modes and increase its contrast using CSS:

filter: contrast(2);
mix-blend-mode: lighten;

On tablet and mobile resolutions (below 1024px), let's use a fallback background image instead of the video.