new smal image section

app/assets/stylesheets/merged/merged.css

@@ -1646,6 +1646,10 @@ select {
   height: 14rem;
 }
 
+.h-60 {
+  height: 15rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -2216,14 +2220,34 @@ select {
   background-clip: padding-box;
 }
 
-.bg-bottom {
-  background-position: bottom;
+.bg-left-top {
+  background-position: left top;
+}
+
+.bg-left {
+  background-position: left;
 }
 
 .bg-left-bottom {
   background-position: left bottom;
 }
 
+.bg-top {
+  background-position: top;
+}
+
+.bg-center {
+  background-position: center;
+}
+
+.bg-bottom {
+  background-position: bottom;
+}
+
+.bg-right-top {
+  background-position: right top;
+}
+
 .bg-right-bottom {
   background-position: right bottom;
 }

app/views/merged/view/_section_small_image.haml

@@ -0,0 +1,12 @@
+.flex.justify-center.p-8.flex-col.lg:flex-row{options(section , :margin , :background )}
+  .flex.justify-center.h-60.w-full.overflow-hidden{order_option(section, "lg:w-1/3")}
+    = image_for(section ,"object-cover")
+  .columns-1.md:columns-2.max-w-full.items-center.w-full.max-w.px-6.mt-6.mx-auto{:class => "lg:w-2/3"}
+    .flex-1{color_option(section)}
+      %h2.text-4xl.font-bold.text-center.mb-4.lg:mb-8= section.header
+      -if section.has_option?("subheader")
+        %h4.text-xl.mt-4.lg:mt-8.md:text-2xl
+          = section.option("subheader")
+      .mt-3{ prose_classes }
+        = markdown(section)
+      =view_button(section , "my-2")

config/merged/section_styles.yml

@@ -113,6 +113,24 @@
   fields:
     - header
     - text
+  options:
+    - subheader
+    - margin
+    - order
+    - color
+    - text_align
+    - background
+    - button_link
+    - button_text
+- template: section_small_image
+  header: One third image header with larger text area text
+  text: Smaller picture with Header and text offset that use more space.
+    Adjustable text alignment (left, center, right).
+    Text section may have background color.
+    Text color can be changed too
+  fields:
+    - header
+    - text
   options:
     - subheader
     - margin