Banner Run {% include 'components/banners/banner-run' %}
HTML
<header class="run-to-the-beat-header">
<div class="responsive-image-header">
<picture class="">
<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1400, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2800 2x">
<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1200, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2400 2x">
<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1000, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2000 2x">
<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=800, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1600 2x">
<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1294 2x">
<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=930 2x">
<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=750 2x">
<img src="https://www.tearfund.org/~/media/images/testing/story-header-desktop.jpg" alt="Bolivia">
</picture>
<div class="responsive-image-header__text-container">
<div class="responsive-image-header__text">
<p>Poverty destroys lives.<br />Join the fightback.</p>
<a class="button" href="#">Sign up now</a>
</div>
</div>
<picture class="mobile-only">
<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=1294 2x">
<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=930 2x">
<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=750 2x">
<img src="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg" alt="Bolivia">
</picture>
</div>
</header>
Twig
<header class="run-to-the-beat-header">
<div class="responsive-image-header">
<picture class="">
<source media="(min-width: 1400px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1400, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2800 2x">
<source media="(min-width: 1200px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1200, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2400 2x">
<source media="(min-width: 1000px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1000, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=2000 2x">
<source media="(min-width: 800px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=800, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1600 2x">
<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/desktop/HubBanner2x.jpg?w=1294 2x">
<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=930 2x">
<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEMarque2x.jpg?w=750 2x">
<img src="https://www.tearfund.org/~/media/images/testing/story-header-desktop.jpg" alt="Bolivia">
</picture>
<div class="responsive-image-header__text-container">
<div class="responsive-image-header__text">
<p>Poverty destroys lives.<br />Join the fightback.</p>
<a class="button" href="#">Sign up now</a>
</div>
</div>
<picture class="mobile-only">
<source media="(min-width: 647px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=647, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=1294 2x">
<source media="(min-width: 465px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=465, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=930 2x">
<source media="(min-width: 375px)" srcset="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=375, https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg?w=750 2x">
<img src="https://www.tearfund.org/~/media/images/run_to_beat_poverty/MOBILEHubBanner2x.jpg" alt="Bolivia">
</picture>
</div>
</header>{}
