Primer

HTML

<div class="multiple-banner">

			<div class="banner-grid-1xp">
	
					<a href="#" class="">
				<div class="banner-grid banner-grid-1 
																banner-emergency__strip banner-emergency__chevron
									" data-image="/slider/photo1.jpg">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>Building lives in the Phillipines</h1>
									<p>Help children like Nina step out of the shadow of conflict</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
				
	</div>
</div>

Twig

<div class="multiple-banner">

	{% if banners|length == 3 %}
	    <div class="banner-grid-1xp-2xl">
	{% elseif banners|length == 2 %}
		<div class="banner-grid-1xp-1xp">
	{% elseif banners|length == 1 %}
		<div class="banner-grid-1xp">
	{% endif %}

		{% for banner in banners %}
			<a href="#" class="">
				<div class="banner-grid banner-grid-{{ loop.index }} 
					{% if banner.breaking %}
						banner-grid--breaking-news
					{% endif %}
					{% if banner.emergency %}
						banner-emergency__strip banner-emergency__chevron
					{% endif %}
				" data-image="{{ banner.image }}">
					<div class="banner-grid__panel">
						<div class="banner-grid__overlay"></div>
						<div class="banner-grid__content-wrapper"><!-- RESPONSIVE CONTAINER -->
							<div class="position">
								<div class="banner-grid__content">
									<h1>{{ banner.title  }}</h1>
									<p>{{ banner.content }}</p>
								</div>
								<div class="banner-grid__content--hover">
								</div>
							</div>
							<!-- CONTENT END -->
						</div>
					</div>
				</div>
			</a>
		{% endfor %}
		
	</div>
</div>

{
    "banners": {
        "1": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg",
            "emergency": true
        }
    }
}