feat: add possibility to change image size at text image element

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

@@ -2,7 +2,6 @@
   margin: 2rem 0;
 }
 
-/* Mobile-first: column layout by default */
 .textimage-container {
   display: flex;
   flex-direction: column;
@@ -13,32 +12,48 @@
   width: 100%;
 }
 
-.textimage-header {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 1rem;
-}
-
 .textimage-text {
   font-size: 1rem;
   line-height: 1.5;
 }
 
 .textimage-image-wrapper {
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.textimage-picture {
+  display: block;
+  max-width: 100%;
+}
+
 .textimage-image {
   max-width: 100%;
   height: auto;
   border-radius: 0.5rem;
+  display: block;
 }
 
-/* Image positions: 25 = left, 26 = right
-   On larger screens, adjust the layout */
+/* Image positions: 25 = left, 26 = right */
+.textimage-container.image-pos-25 {
+  flex-direction: column;
+}
+
+.textimage-container.image-pos-26 {
+  flex-direction: column;
+}
+
+/* Size classes apply at all viewports */
+.textimage-image-wrapper.size-25 .textimage-picture {
+  max-width: 300px;
+}
+
+.textimage-image-wrapper.size-50 .textimage-picture {
+  max-width: 600px;
+}
+
+/* On larger screens, arrange horizontally for image position settings */
 @media (min-width: 768px) {
   .textimage-container.image-pos-25 {
     flex-direction: row;
@@ -48,8 +63,7 @@
     flex-direction: row-reverse;
   }
 
-  .textimage-wrapper,
-  .textimage-image-wrapper {
-    flex: 1 1 50%;
+  .textimage-wrapper {
+    flex: 1;
   }
 }