<div class="container">
    <section class="card" #tinderCard *ngFor="let question of questions; let i = index"
    [ngStyle]="{ zIndex: questions.length - i, transform: 'scale(' + (20 - i) / 20 + ') translateY(-' + 20 * i + 'px)' }"
    (pan)="handlePan($event)" (panend)="handlePanEnd($event)">
        <img [src]="question.image" alt="">
        <p>
            {{ question.text }}
        </p>
    </section>

    <div class="action-buttons">
        <button (click)="userClickedButton($event, false)"> <ion-icon name="chevron-back-outline"></ion-icon> </button>
        <button (click)="userClickedButton($event, true)"> <ion-icon name="chevron-forward-outline"></ion-icon> </button>
    </div>
</div>