{#

Element ID: Element11
Element Name: Success Story

#}

<section id="{{ element.html_id  }}" class="success-story">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-lg-5 info">
                    <div class="info-content">
                        <h2> {{ element.title  }} </h2>
                        <p> {{ element.description  }}</p>
                        <div class="btn-left">
                            <button type="submit" class="btn btn--gradient modal-interview-trigger" data-trigger="{{ element.html_id }}">View interview script</button>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-7 profile">
                    <div class="border-profile"></div>
                    <div class="profile-content">
                        <div class="rounded-profile-image" style="background-image: url({{ TimberImage( element.profile_image ) }})"></div>
                        <h3> {{ element.name  }} </h3>
                        <h4> {{ element.position  }}</h4>
                        <p> {{ element.quote  }}</p>       
                    </div>
                </div>
            </div>
        </div>
        <div class="border"></div>
</section>

<div id="modal_{{ element.html_id }}" class="modal-window modal-interview ">
<div class="modal-inner">
    <div class="close-modal">
    <svg class="icon-close">
        <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-close"></use>
    </svg>
    </div>
    <div class="modal-header">
        <div class="title">
            <h2>Customer voice</h2>
            <p>Interview script</p>
        </div>
        <div class="profile">
            <div class="profile-container">
                <div class="rounded-profile-image" style="background-image: url({{ TimberImage( element.profile_image ) }})"></div>
                <div class="profile-info">
                    <h3> {{ element.name }} </h3>
                    <h4> {{ element.position }}</h4>
                </div>
            </div>
            <div class="company-logo">
                <img class="profile-image" src="{{ TimberImage( element.company_logo ) }}" alt="{{ element.company_logo.alt }}" />
            </div>
        </div>
    </div>
    <div class="modal-content">          
    {% for item in element.interview %}
        <div class="questions">
            <p class="question">{{ item.question }}</h4>
            <p class="answer">{{ item.answer }}</p>
        </div>
    {% endfor %}
    </div>


</div>
</div>