feat: add url to site config, add webp support, change image sizing

packages/base/ContentBlocks/ContentElements/hero/assets/frontend.css

@@ -8,7 +8,7 @@
 }
 
 .frame-type-cloonar_hero + .frame {
-    margin-top: -10rem;
+    margin-top: -10.4rem;
 }
 .frame-type-cloonar_hero .container {
     padding-bottom: 3rem;
@@ -81,6 +81,7 @@
 .frame-type-cloonar_hero .hero-image-wrapper {
   margin-top: 1rem;
   align-self: flex-end;
+  width: 100%;
 }
 
 .frame-type-cloonar_hero .hero-image {

packages/base/ContentBlocks/ContentElements/hero/templates/frontend.html

@@ -21,11 +21,23 @@
         <f:if condition="{data.image}">
           <f:then>
             <picture>
+                <!-- WEBP source -->
+                <source
+                  type="image/webp"
+                  srcset="
+                    {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default', fileExtension:'webp')} 320w,
+                    {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w,
+                    {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default', fileExtension:'webp')} 1024w"
+                  sizes="(max-width: 320px) 80vw,
+                         (max-width: 768px) 80px,
+                         430px" />
+
+                <!-- Fallback source -->
               <source
                 srcset="
                   {f:uri.image(image:data.image.0, width:'320c', cropVariant:'default')} 320w,
                   {f:uri.image(image:data.image.0, width:'600c', cropVariant:'default')} 600w,
-                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 430w"
+                  {f:uri.image(image:data.image.0, width:'430c', cropVariant:'default')} 1024w"
                 sizes="(max-width: 320px) 80vw,
                        (max-width: 768px) 80vw,
                        430px" />