This is .-fade

These are solely examples of how to implement CSS gradients and blends on hero backgrounds. This one is a radial gradient centered on the right side of the hero.

This is .-vignette

It's an elliptical vignette on the whole hero.

This is .-split

It is just using a linear gradient to cover the left half.

This is .-multiply

It is using mix-blend-mode: multiply with the accent-color over the background image.

This is .-colorize with .-fade

It uses mix-blend-mode: color. -colorize and -multiply can be combined with other gradients.