fix: design changes

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

@@ -7,7 +7,6 @@
   <f:asset.css identifier="CBHero" href="{cb:assetPath()}/frontend.css" />
 
   <div class="hero-inner">
-    <!-- Inline style with f:uri.resource to ensure correct path -->
     <div class="hero">
       <h2 class="hero-subheader">{data.subheader}</h2>
       <h1 class="hero-title">{data.header}</h1>
@@ -15,13 +14,30 @@
         <f:format.html>{data.bodytext}</f:format.html>
       </div>
       <div class="hero-social-icons">
-            <a href="https://instagram.com" class="social-icon"><i class="ci ci-instagram"></i></a>
-            <a href="https://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></i></a>
+        <a href="https://instagram.com" class="social-icon"><i class="ci ci-instagram"></i></a>
+        <a href="https://tiktok.com" class="social-icon"><i class="ci ci-tiktok"></i></a>
       </div>
       <div class="hero-image-wrapper">
         <f:if condition="{data.image}">
           <f:then>
-            <f:image image="{data.image.0}" alt="Hero Image" class="hero-image" />
+            <picture>
+              <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"
+                sizes="(max-width: 320px) 80vw,
+                       (max-width: 768px) 80vw,
+                       430px" />
+              <f:image
+                image="{data.image.0}"
+                treatIdAsReference="1"
+                cropVariant="default"
+                width="430c"
+                alt="Hero Image"
+                loading="lazy"
+                class="hero-image" />
+            </picture>
           </f:then>
           <f:else>
             <p>No image available</p>