FLOATING
IN SPACE
The JPEG with slot="media" has data-size="auto". This way it gets its own intrinsic size instead of stretching to fill the media area.
With --steam-block-media-margin a negative top margin is set. --steam-block-media-margin-stacked does the same on a phone, where the media sits on top.
Code
<style>
.floating-icon {
--steam-block-background: #eec;
--steam-block-padding: 4rem 3rem;
--steam-block-media-align-items: center;
--steam-block-media-margin: -50% 0 0 0;
--steam-block-media-margin-stacked: -6rem 0 0 0;
}
</style>
<steam-block class="floating-icon" order="flip">
<img data-size="auto" slot="media" src="icon.svg" alt="">
<div slot="content"><h1>Floating in space</h1></div>
</steam-block>