{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/components/card/card-macros.njk" as card %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<section class="c-contact l-section l-section--background-right {{classes}}">
		<div class="c-contact__container l-container">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="l-grid__col l-grid__col--4@desktop">
					<h3 class="c-contact__title">{{data.title}}</h3>

					<p class="c-contact__text">{{data.text}}</p>
				</div>

				<div class="c-contact__content l-grid__col l-grid__col--7@desktop l-grid__col--offset-1@desktop u-margin-top-4x@below-tablet">
					<ul class="c-contact__list l-grid l-grid--with-spacing l-grid--stretch">
						{% for item in data.items %}

							<li class="c-contact__list-item l-grid__col l-grid__col--6@desktop">
								{{card.default("c-contact__card", item)}}
							</li>

						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</section>

{% endmacro %}