Show/hide markup
<div id="banner" class="section banner 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="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>