Image + Sidebar

The item has two columns - one with a fixed height image and the other with text. It can either be full width to fill the browser or centered with a maximum width like the example above.
On wide screens, the image and sidebar sit side by side. If the text overflows the container's height it can be scrolled.
On screen widths below the break point, the text sits below the image and becomes full height.
Proportions
Since this is a CSS Grid layout, the proportional widths of the image and text can be easily adjusted. The widget has controls for entering the number of fractional units occupied by the left and right columns. Setting both values to 1 will make the columns equal in width. In the example above, the left column is set to 3 and the right to 2. This makes the image occupy 3/5 or 60% of the width and the text 2/5 or 40%.
Height
There are controls for setting the fixed height and the height below the break point. On mobile phones in portrait mode, the image fills the screen height.
Image
The image aspect raatio doesn't matter too much since it uses the object fit selector set to "cover" to fit any old size.
The image in this example was cropped to 800px square before importing into EverWeb.
The optional overlay has controls for background color and opacity and can animate in if required.
The caption is centered horizontally an can be placed at the top, center or bottom of the image by setting the align-self property ot start, center or end.
Text
The sidebar has a heading and a text block. The text can use a Google hosted font with a web safe fallback if required.
The method of inserting paragraph headings and adjusting the spacing is outlined in the sidebar above.