Media Block with Blurb

<h2 class="component-subtitle">Component Title (Optional)</h2>
<div class="media-block-blurb">
    <div class="media-block-blurb__media-column">
        <img src="https://via.placeholder.com/480x270" alt="" class="img-responsive center-block" />
    </div>
    <div class="media-block-blurb__blurb-column">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure nam rerum ratione nostrum alias beatae dolores qui, exercitationem enim necessitatibus doloribus provident velit, dolore, earum dicta officia. Veritatis, consequuntur nulla.</p>
    </div>
</div>

.media-block-blurb {
  display: flex;
  flex-direction: column;
  margin-bottom: 4rem;

  @media (min-width: $breakpoint-tablet) {
    flex-direction: row;
  }
}

.media-block-blurb__media-column {
  flex: 1 0 33%;
  margin-bottom: 2.4rem;

  @media (min-width: $breakpoint-tablet) {
    margin-right: 3.2rem;
    margin-bottom: 0;
  }
}

.media-block-blurb__blurb-column {
  @include typeSubheader;
  flex-basis: 100%;
}