Right image in page margin, left content remains aligned

An absolutely positioned div '.background-image_wrapper-right' is nested in the section (position: relative) itself. The wrapper has a minimum width of 50% (of window width) and padding left to fake the center column gutter and is display: flex for vertical alignment. The image itself is set to object-fit: contain to make it responsive. Some foo fo sho, but it does work. 🤷️

*I did not make this responsive.

No changes made in this section

This is the normal Relume Library feature component for alignment comparison

Add the combo class '.test' to '.section-layout25' to see the sections overlap and verify alignment.

100%
Oregon
100%
Gorgeous

A full section height alternative

Same image wrapper with image set to a height of 100% via a combo class of '.is-full-height' on the '.background-image'

For content scale:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A duplicate of above to show an example use case (stacked)

Same image wrapper with image set to a height of 100% via a combo class of '.is-full-height' on the '.background-image'

For content scale:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

An alternative that keeps image inside sections vertical padding

The same image wrapper as above with combo class of '.is-padded' where padding matches that of 'padding-vertical, .padding-xhuge'

For content scale:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.