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

{# ========================================================================== #}
{# :: Partial #}
{# ========================================================================== #}
<section class="c-intro-faq u-padding-top-8x">
	<div class="l-container">
		<div class="l-grid l-grid--with-spacing l-grid--stretch">
			<div class="l-grid__col l-grid__col--8@tablet l-grid__col--5@desktop">
				<h1>
					Lot staat voor <br> je klaar
				</h1>

				<p>
					Ontdek de Lot verduurzaam hypotheek en ontdek onze
					energiebesparende maatregelen. Is ons verhaal nog niet duidelijk of
					heb je een andere vraag?
				</p>
			</div>

			{{bubble.default("l-grid__col l-grid__col--4 l-grid__col--offset-3 l-grid__col--align-bottom c-bubble--arrow-bottom c-intro-faq__bubble u-show@desktop", {
				text: "Hoi! Als je vragen hebt, kan je steeds bij mij terecht."
			})}}

			{{card.default("l-grid__col l-grid__col--6@tablet l-grid__col--4@desktop c-intro-faq__contact-item u-margin-top-8x", {
				title: "E-mail",
				content: "<p>Lorem ipsum dolor sit amet, repudiare at, cu sonet
				imperdiet theophrastus sea.</p>",
				button: {
					text: "hoi@lot.be"
				}
			})}}

			{{card.default("l-grid__col l-grid__col--6@tablet l-grid__col--4@desktop c-intro-faq__contact-item u-margin-top-8x", {
				title: "Bel gratis",
				content: "<p>Bereikbaar op:<br>werkdagen 9:00 tot 20:00<br>
				zaterdag 10:00 tot 16:00</p>",
				cta: "Bel ons 000 000 00 00"
			})}}
		</div>
	</div>

	<div class="c-intro-faq__circles-container">
		{{circles.default("c-circle--color-primary c-intro-faq__circles")}}
	</div>
</section>