Primer

HTML

<div class="full-banner full-banner--mean-bean full-banner--mean-bean-landing full-banner--image full-banner--featured flexbox flexboxlegacy enhanced" data-image="/images/mainsite5/mean-bean/background.jpg"><div class="full-banner__image" style="background-image: url(&quot;/images/mainsite5/mean-bean/background.jpg&quot;); background-repeat: no-repeat;"></div>
	<div class="inner">
		<div class="full-banner--featured-panel">
			<div class="full-banner__content-wrapper">
			<!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
				<div class="full-banner__content">

					<div class="large-col-6">
						<picture>
							  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop_@2x.png 2x">
							   <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile@2x.png 2x">
							  <img class="banner-mean-bean-logo" src="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Mobile.png" alt="Mean Bean Challenge Weekender">
						</picture> 
						<p>22–24 March</p>
						<p>Spend two days eating just rice and beans in the name of beating poverty.</p>

						<div class="large-col-6">
							<div>
								<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
									
									<div class="button-bottom"></div>
									<div class="button-top">Sign Up Today</div>
									
								</a>
							</div>
						</div>
					</div>

					<div class="large-col-6">
						<picture class="desktop-only">
						  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/gifs/Weekender_Header_GroupShot_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Header_GroupShot_Desktop_@2x.png 2x">
						  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile_@2x.png 2x">
						  <img src="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif" alt="Mean Bean Challenge">
						</picture> 
					</div>

				</div>
				<!-- CONTENT END -->
			</div>
		</div>
	</div>
</div>

Twig

<div class="full-banner full-banner--mean-bean full-banner--mean-bean-landing full-banner--image full-banner--featured flexbox flexboxlegacy enhanced" data-image="/images/mainsite5/mean-bean/background.jpg"><div class="full-banner__image" style="background-image: url(&quot;/images/mainsite5/mean-bean/background.jpg&quot;); background-repeat: no-repeat;"></div>
	<div class="inner">
		<div class="full-banner--featured-panel">
			<div class="full-banner__content-wrapper">
			<!-- RESPONSIVE CONTAINER -->
			<!-- CONTENT START -->
				<div class="full-banner__content">

					<div class="large-col-6">
						<picture>
							  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Desktop_@2x.png 2x">
							   <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Logo_Mobile@2x.png 2x">
							  <img class="banner-mean-bean-logo" src="/images/mainsite5/mean-bean/2019/Weekender_Logo_Bliss_Mobile.png" alt="Mean Bean Challenge Weekender">
						</picture> 
						<p>22–24 March</p>
						<p>Spend two days eating just rice and beans in the name of beating poverty.</p>

						<div class="large-col-6">
							<div>
								<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&amp;Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean button--mean-bean-red">
									
									<div class="button-bottom"></div>
									<div class="button-top">Sign Up Today</div>
									
								</a>
							</div>
						</div>
					</div>

					<div class="large-col-6">
						<picture class="desktop-only">
						  <source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/gifs/Weekender_Header_GroupShot_Desktop.png, /images/mainsite5/mean-bean/2019/Weekender_Header_GroupShot_Desktop_@2x.png 2x">
						  <source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile.png, /images/mainsite5/mean-bean/2019/Weekender_Header_48Hours_Mobile_@2x.png 2x">
						  <img src="/images/mainsite5/mean-bean/2019/gifs/MeanBean_LandingPage_Header_Desktop.gif" alt="Mean Bean Challenge">
						</picture> 
					</div>

				</div>
				<!-- CONTENT END -->
			</div>
		</div>
	</div>
</div>

{}