feat: change button hover, change small textimage design

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

@@ -41,15 +41,12 @@
   flex-direction: column;
 }
 
-/* Size classes apply at all viewports */
-.textimage-image-wrapper.size-25 .textimage-picture {
-}
-
-.textimage-image-wrapper.size-50 .textimage-picture {
-}
-
 /* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
+    .textimage-container.size-25 {
+        --gap: 8rem;
+    }
+
   .textimage-container.image-pos-25 {
     flex-direction: row;
   }
@@ -59,9 +56,13 @@
   }
 
     .textimage-image-wrapper.size-25 {
-        flex: 0 0 calc(25% - (var(--gap) / 2));
+        flex: 0 0 calc(40% - (var(--gap) / 2));
     }
 
+    /* .textimage-wrapper.size-25 { */
+    /*     flex: 0 0 calc(40% - (var(--gap) / 2)); */
+    /* } */
+
     .textimage-image-wrapper.size-50 {
         flex: 0 0 calc(50% - (var(--gap) / 2));
     }

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

@@ -13,7 +13,7 @@
     <f:then><f:variable name="sizeClass" value="size-50" /></f:then>
   </f:if>
 
-  <div class="textimage-container image-pos-{data.imageorient} fade-in-on-scroll">
+  <div class="textimage-container image-pos-{data.imageorient} {sizeClass} fade-in-on-scroll">
     <div class="textimage-image-wrapper {sizeClass}">
       <f:if condition="{data.image}">
         <f:then>
@@ -53,7 +53,7 @@
         </f:else>
       </f:if>
     </div>
-    <div class="textimage-wrapper">
+    <div class="textimage-wrapper {sizeClass}">
       <f:if condition="{data.header}">
         <h2 class="textimage-header">{data.header}</h2>
         <h3 class="textimage-subheader">{data.subheader}</h3>