<div class="media">
  <div class="media-illustration">
    <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100" fill="#5f6368" /></svg>
  </div>
  <div class="media-content">
    <h3>Media Object</h3>
    <p>This is a media object. There’s an image and also some content.</p>
    <p>In this case, the content is a heading followed by two paragraphs of text.</p>
  </div>
</div>

p {
  margin-block-start: var(--metric-box-spacing);
}
.media {
  background-color: var(--color-off-white);
  margin: var(--metric-box-spacing);
  padding: var(--metric-box-spacing);
  display: flex;
  align-items: center;
  gap: var(--metric-box-spacing);
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}