Show/hide markup
<div id="banner" class="section bg-image banner text-overlay ">
    <div class="show-for-small-only" data-ratio="3x2">
        <div class="bg-image-cover" style="background-image: url('https://placehold.it/768x512');"></div>
    </div>
    <div class="show-for-medium-only" data-ratio="2x1">
        <div class="bg-image-cover" style="background-image: url('https://placehold.it/1024x512');"></div>
    </div>
    <div class="show-for-large" data-ratio="3x1">
        <div class="bg-image-cover" style="background-image: url('https://placehold.it/1800x600');"></div>
    </div>
    <div class="row pad">
        <div class="banner--content text-overlay--content">
            <h2 class="title">Compelling, intriguing title goes here</h2>
            <p class="teaser">Great, equally interesing sub-title and descriptive text follows here</p>
            <a href="#" class="button" title="Read the story">Read the story</a>
        </div><!-- /.banner-content -->
    </div><!-- /.row.pad -->
</div>