Home Banner 2 Items {% include 'components/home-banner/home-banner~2-items' %}
#
HTML
<div class="multiple-banner">
    <div class="banner-grid-1xp-1xp">
        <a href="#" class="">
            <div class="banner-grid banner-grid-1 " 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>
        <a href="#" class="">
            <div class="banner-grid banner-grid-2 " 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"
        },
        "2": {
            "title": "Building lives in the Phillipines",
            "content": "Help children like Nina step out of the shadow of conflict",
            "image": "\/slider\/photo1.jpg"
        }
    }
}