FEATURE extending comoonents variants with has background, backgroundColor and disposition

resources/css/blocks/chapter-section.css

@@ -1,15 +1,10 @@
 .chapter-section {
   @apply flex items-center justify-between gap-8  2xl:gap-12 !my-0 px-12;
-  /* min-height: 80vh; */
   @apply xl:py-32 2xl:py-48;
   @apply max-w-screen-2xl;
 
   @apply mx-auto;
 
-  /* & + *:not(.simple-screen) {
-		@apply xl:mt-32;
-	} */
-
   h2 {
     @apply title-small;
   }
@@ -19,6 +14,9 @@
   &--right {
     @apply flex-row-reverse;
   }
+  &--has-background {
+    @apply relative !py-12 xl:py-24 !my-12;
+  }
   &__content {
     /* flex-shrink: 0; */
     @apply max-w-3xl;
@@ -51,4 +49,15 @@
       @apply !h-12;
     }
   }
+  &__background {
+    @apply absolute top-0 left-0 w-full h-full;
+    z-index: 1;
+
+    &--right {
+      transform: scaleX(-1);
+    }
+  }
+  > *:not(.chapter-section__background) {
+    z-index: 2;
+  }
 }