/* hero-webp.css
   Loaded on the front page only, after home.css.

   home.css is a verbatim extraction from the demo and is diffed against it, so
   it cannot be edited. This overrides just the background-image of .image-side
   to prefer a WebP that is ~97% smaller than the extracted PNG (3,055 KB -> 114 KB).

   Three tiers, so nothing can end up with no hero at all:
     1. image-set() with type hints          -> modern browsers pick WebP
     2. -webkit-image-set()                  -> older WebKit
     3. whatever home.css already set        -> the original PNG

   background-size and background-position are declared separately in home.css
   and are deliberately not touched here. Keep the gradient identical to the
   source rule; it is the first layer of the same background stack. */

.image-side {
  background-image:
    linear-gradient(90deg, rgba(8,16,14,.56) 0%, rgba(8,16,14,.26) 40%, rgba(8,16,14,.02) 100%),
    -webkit-image-set(url("../img/hero.webp") 1x);
  background-image:
    linear-gradient(90deg, rgba(8,16,14,.56) 0%, rgba(8,16,14,.26) 40%, rgba(8,16,14,.02) 100%),
    image-set(url("../img/hero.webp") type("image/webp"),
              url("../img/hero.png") type("image/png"));
}