Hero {% include 'components/big-quiz-2019/hero' %}
#
HTML 
<div class="bq19-hero">
	<div class="bq19-inner">
		<h1 class="bq19-hero__heading-image">
			<span class="bq19-audio-only">The Big Quiz Night 2019</span>

			<div class="bq19-hero-image">
				<img class="bq19-hero-image__sprite bq19-hero-image__text"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/text.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/text.png"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__delorean"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__delorean-fire"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean-fire@2x.png 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__flag"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/flag.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/flag@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/flag.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__octopus"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/octopus@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__churchill"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/churchill@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__whoosh"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png 1x, /images/mainsite5/big-quiz-2019/hero-image/whoosh@2x.png 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__eagle"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/eagle@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__dancers"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/dancers@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__javelin"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/javelin@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif"
						alt="" />
			</div>
		</h1>
		
		<div class="bq19-hero__text center-text">
			<time class="bq19-hero__heading" datetime="2019-11-16">Sat 16th Nov</time>
			<p class="bq19-hero__strapline">Hundreds of churches. Thousands of people. One Big Quiz Night.</p>
			<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
		</div>
	</div>
</div>
Twig 
<div class="bq19-hero">
	<div class="bq19-inner">
		<h1 class="bq19-hero__heading-image">
			<span class="bq19-audio-only">The Big Quiz Night 2019</span>

			<div class="bq19-hero-image">
				<img class="bq19-hero-image__sprite bq19-hero-image__text"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/text.png 1x, /images/mainsite5/big-quiz-2019/hero-image/text@2x.png 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/text.png"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__delorean"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/delorean.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__delorean-fire"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png 1x, /images/mainsite5/big-quiz-2019/hero-image/delorean-fire@2x.png 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/delorean-fire.png"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__flag"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/flag.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/flag@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/flag.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__octopus"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/octopus@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/octopus.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__churchill"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/churchill@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/churchill.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__whoosh"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png 1x, /images/mainsite5/big-quiz-2019/hero-image/whoosh@2x.png 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/whoosh.png"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__eagle"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/eagle@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/eagle.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__dancers"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/dancers@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/dancers.gif"
						alt="" />

				<img class="bq19-hero-image__sprite bq19-hero-image__javelin"
						srcset="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif 1x, /images/mainsite5/big-quiz-2019/hero-image/javelin@2x.gif 2x"
						src="/images/mainsite5/big-quiz-2019/hero-image/javelin.gif"
						alt="" />
			</div>
		</h1>
		
		<div class="bq19-hero__text center-text">
			<time class="bq19-hero__heading" datetime="2019-11-16">Sat 16th Nov</time>
			<p class="bq19-hero__strapline">Hundreds of churches. Thousands of people. One Big Quiz Night.</p>
			<a class="button button--bold bq19-button bq19-button--no-margin" href="#">Sign up to host</a>
		</div>
	</div>
</div>
{}

The Big Quiz Night 2019

Hundreds of churches. Thousands of people. One Big Quiz Night.

Sign up to host