<section class="faq background-gray overflow-hidden" data-css-animation="stagger-list" data-brand-header>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell large-offset-1 large-10">
<div class="faq__title title out title__no-center" data-css-animation="out-in">
<div class="in">
<h2>{{ content.title }}</h2>
</div>
</div>
{% for category in content.blocks %}
<div class="faq__category">
<div id="category-{{ loop.index }}" class="title title__no-center faq__title-category faq__border" data-css-animation-x="stagger-item">
<h4>{{ category.title }}</h4>
</div>
{% for question in category.question %}
<div class="faq__card faq__border" data-simple-dropdown data-css-animation-x="stagger-item">
<div data-click-area>
<div class="grid-x grid-margin-x align-middle">
<div class="cell small-2 large-1">
<svg class="apartments-card__arrow" width="48" height="48" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle class="border" opacity=".1" cx="24" cy="24" r="23.25" transform="rotate(90 24 24)"
stroke="#333"
stroke-width="1.5"/>
<path class="arrow" d="M28.5 21.75l-4.5 4.5-4.5-4.5" stroke="#333" stroke-width="1.5"/>
</svg>
</div>
<div class="cell small-10">
<div class="title title__no-center">
<h4>{{ question.title }}</h4>
</div>
</div>
</div>
</div>
<div data-list>
<div class="grid-x grid-margin-x">
<div class="cell small-offset-1 small-10">
<div class="editable">{{ question.content|raw }}</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</section>