Show/hide markup
<div id="banner" class="section bg-secondary bg-dark banner text-image ">

    <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="2x3">
        <div class="bg-image-cover" style="background-image: url('https://placehold.it/512x768');"></div>
    </div>
    <div class="show-for-large" data-ratio="2x1">
        <div class="bg-image-cover" style="background-image: url('https://placehold.it/1024x512');"></div>
    </div>
    <div class="row pad">
        <div class="banner--content text-image--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>
    </div>
</div>