<div
  id="{{ 'cta_' + generatedId }}"
  class="container cta"
  [style]="{ 'background-color': cta.value.background.color }"
  [ngStyle]="
    cta.value.background.image && { 'background-image': 'url(\'' + cta.value.background.image.download_url + '\')' }
  ">
  <!-- header -->
  <h2 class="pt-3 text-{{ cta.value.header.align }}">
    {{ cta.value.header.text }}
  </h2>

  <!-- image & text -->
  <div class="cta__row text-center">
    <div [ngClass]="'cta__item--' + cta.value.image.position" class="cta__column" *ngIf="cta.value.image.image">
      <img
        class="rounded mx-auto d-block mw-100 cta__image"
        [src]="cta.value.image.image.download_url | sanitizeUrl"
        [alt]="cta.value.text.text" />
    </div>
    <div [ngClass]="'cta__item--' + cta.value.text.align" class="cta__column cta__text--small">
      <span>{{ cta.value.text.text }}</span>
    </div>
  </div>

  <!-- button -->
  <div class="cta__row">
    <div [ngClass]="'cta__item--' + cta.value.button.position" class="cta__column pb-3">
      <a
        class="btn {{ cta.value.button.style }} {{ cta.value.button.size }}"
        href="{{ cta.value.button.action_url }}"
        target="{{ cta.value.button.target }}">
        {{ cta.value.button.text }}
      </a>
    </div>
  </div>
</div>
