MAGAZINE
OVERLAP
An extreme negative -content-margin, -50%, pulls the headline hard back over the media edge: an editorial double-page spread in one variable. media="fluid" brings the image to the edge of the viewport. Stacked on a phone, -content-margin-stacked pulls the box up over the photo instead.
Code
<style>
.magazine-overlap {
--steam-block-content-width: 45%;
--steam-block-media-width: 45%;
--steam-block-content-margin: 0 0 0 -50%;
--steam-block-content-margin-stacked: -6rem 1.5rem 0;
--steam-block-content-padding: 4vw;
--steam-block-content-background: #fff;
}
</style>
<steam-block class="magazine-overlap" order="flip">
<img slot="media" src="photo.jpg" alt="">
<div slot="content"><h1>Magazine overlap</h1></div>
</steam-block>