<!-- start `story-image` component; -->
<div class="story-image" role="complementary">
  <div class="img-cover"><img src="http://via.placeholder.com/1600x432" alt="empty placeholder image" /></div>
</div>
<!-- end `story-image` component; -->

{
  "img": "http://via.placeholder.com/1600x432",
  "alt": "empty placeholder image"
}

.story-image {
  .img-cover {
    height: size(10);

    @include breakpoint($breakpoint--sm) {
      height: size(12);
    }

    @include breakpoint($breakpoint--md) {
      height: size(14);
    }

    @include breakpoint($breakpoint--lg) {
      height: size(16);
    }

    @include breakpoint($breakpoint--xl) {
      height: size(18);
    }
  }
}