feat: many changes

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

@@ -3,7 +3,7 @@
 <f:section name="Main">
   <f:variable name="imageSizeClass" value="md:w-1/2" />
   <f:variable name="textSizeClass" value="md:w-1/2" />
-  <f:variable name="gapClass" value="gap-8" />
+  <f:variable name="gapClass" value="gap-8 md:gap-16" />
 
   <f:if condition="{data.imagesize} == 1"> <!-- Size 25% -> map to 40% for layout -->
     <f:variable name="imageSizeClass" value="md:w-2/5" />
@@ -11,7 +11,7 @@
     <f:variable name="gapClass" value="gap-8 md:gap-16 lg:gap-32" />
   </f:if>
 
-  <div class="flex flex-col {gapClass} fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
+  <div class="flex flex-col {gapClass} py-16 fade-in-on-scroll {f:if(condition: '{data.imageorient} == 26', then: 'md:flex-row-reverse', else: 'md:flex-row')}">
     <div class="flex items-center justify-center {imageSizeClass}">
       <f:if condition="{data.image}">
         <f:then>
@@ -39,7 +39,7 @@
               cropVariant="default"
               width="538c"
               alt="{data.image.0.alternative}"
-              class="max-w-full h-auto rounded-lg block"
+              class="max-w-full h-auto block"
             />
           </figure>
         </f:then>
@@ -50,8 +50,7 @@
     </div>
     <div class="{textSizeClass}">
       <f:if condition="{data.header}">
-        <h2 class="font-hajime text-primary font-normal leading-none text-3xl md:text-5xl mb-2">{data.header}</h2>
-        <h3 class="text-xl md:text-2xl font-semibold mb-4">{data.subheader}</h3>
+        <h2>{data.header}</h2>
       </f:if>
       <f:if condition="{data.bodytext}">
         <div class="prose lg:prose-lg">