Banner Scalable Test {% include 'components/banners/banner-scalable-test' %}
HTML
<div class="full-banner full-banner--image full-banner--featured scalable-banner">
<picture class="scalable-banner__image">
<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
</picture>
</div>
Twig
<div class="full-banner full-banner--image full-banner--featured scalable-banner">
<picture class="scalable-banner__image">
<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1400, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2800 2x">
<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1200, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2400 2x">
<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1000, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=2000 2x">
<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=800, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1600 2x">
<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=647, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=1294 2x">
<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=465, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=930 2x">
<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=375, https://www.tearfund.org/~/media/images/Big_Quiz_Night/restoring-lives-header.jpg?w=750 2x" alt="Bolivia">
<img src="https://www.tearfund.org/~/media/images/testing/story-header-mobile.jpg" alt="Bolivia">
</picture>
</div>{}