<section class="ai-call-out ai-component" style="background-image:url('../../images/bitmap/call-out.jpg');">
<div class="ai-container">
<div class="ai-wrapper">
<div class="ai-width-s">
<h2 class="h5 text-center sub-heading text-white">Vision & Strategy</h2>
<div class="ai-w-100 ai-d-flex ai-jc-center">
<h1 class="h3 ai-icon-white text-white">What dreams are made of</h1>
</div>
<p class="text-white text-center">Our children's dreams are closer to being <br />realized than you might think. Discover more</p>
</div>
</div>
</div>
</section>
<section class="ai-call-out ai-component" style="background-image:url('{{{path image}}}');">
<div class="ai-container">
<div class="ai-wrapper">
<div class="ai-width-s">
{{#if sub-title}}
<h2 class="h5 text-center sub-heading text-white">{{{sub-title}}}</h2>
{{/if}}
{{#if title}}
<div class="ai-w-100 ai-d-flex ai-jc-center">
<h1 class="h3 ai-icon-white text-white">{{{title}}}</h1>
</div>
{{/if}}
{{#if text}}
<p class="text-white text-center">{{{text}}}</p>
{{/if}}
</div>
</div>
</div>
</section>
{
"sub-title": "Vision & Strategy",
"title": "What dreams are made of",
"text": "Our children's dreams are closer to being <br/>realized than you might think. Discover more",
"image": "/images/bitmap/call-out.jpg"
}
// hero
section{
&.ai-call-out{
padding: 3rem 0;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
@media (min-width: $large) {
}
.ai-wrapper{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.ai-w-100{
padding: 2rem 0;
}
}
}
No notes defined.