Treble Sketch

<div style="width: 100%; container-type: inline-size; overflow-x: auto;">

<div style="width: 650px; width: 100cqw;
box-sizing: border-box; aspect-ratio: 650/171;
font-size: 16.25px; font-size: 2.5cqw; 
background: #000; color: #fff;
outline: #fff solid 4px; outline-offset: -10px;
outline: #fff solid 0.6cqw; outline-offset: -1.5cqw;
margin: 0px; padding: 0px;
position: relative;">

<div style="position: absolute;
top: 12px; left: 12px; right: 12px; bottom: 12px;
top: 1.85cqw; left: 1.85cqw; right: 1.85cqw; bottom: 1.85cqw;">

<div style="
box-sizing: border-box; height: 100%;
margin: 0px; padding: 8px; padding: 1.25cqw;
font-family: monospace; font-size: 1.2em;
font-weight: bold;
border-spacing: 0px;
border-collapse: collapse;
display: flex;
">

<div style="
height: 100%; aspect-ratio: 1 / 1;
image-rendering: pixelated;
background: url('Image URL Here') center/contain no-repeat;
display: inline-block;"></div>

<div style="vertical-align: top; width: min-content; display: inline-block;
margin: 0 8px; margin: 0 1.25cqw">*</div>

<div style="vertical-align: top; width: fit-content; flex: 1;
display: inline-block; height: 100%;">Your Text Here</div>
</div></div></div></div>

Note: This post uses W3 Container Queries which requires an up to date browser to properly view.
A fallback width has been set, which is best viewed in desktop browsers.