<a href="{{#if fields.content.siteUrl}}{{dpUrlResolver fields.content}}{{else}}{{urlResolver fields}}{{/if}}{{#if cruiseRegion}}#region={{cruiseRegion}}{{/if}}" title="{{fields.linkTitle}}" class="tui-card content-navigation-card{{#if useFullMobileWidth}} full-width{{/if}}"{{#and trackPageInGa (not dontTrackGroupInGa) (not fields.dontTrackCardInGa) }} {{>ga_attributes fields pageName=pageName componentName=componentName componentHeading=componentHeading heading=fields.linkText index=index}}{{/and}}>
  {{>news_label newsLabel=fields.newsLabel labelColor=fields.labelColor}}
  <div class="media-container">
    <div class="media">
      {{#if fields.imagePage}}
        <div class="media-container">
          {{#if fields.imageNumber}}
            {{#with (itemAt fields.imagePage.fields.content.images (subtract fields.imageNumber 1))}}
              {{>image_responsive_card image-url=url alt-text=../fields.altText}}
            {{/with}}
          {{else}}
            {{#with (itemAt fields.imagePage.fields.content.images 0)}}
              {{>image_responsive_card image-url=url alt-text=../fields.altText}}
            {{/with}}
          {{/if}}
        </div>
      {{else if fields.content.mainImage}}
        {{>image_responsive_card image-url=fields.content.mainImage.url alt-text=fields.content.name preserve-image-quality=true}}
      {{else}}
        {{#if fields.mainImage.fields.image.fields.file.url}}
          {{>image_responsive_card image-url=fields.mainImage.fields.image.fields.file.url alt-text=fields.mainImage.fields.altText preserve-image-quality=fields.mainImage.fields.preserveImageQuality}}
        {{else if fields.mainImage.fields.file.url}}
          {{>image_responsive_card image-url=fields.mainImage.fields.file.url alt-text=fields.mainImage.fields.description}}
        {{else}}
          {{>image_responsive_card image-url=fields.image.fields.image.fields.file.url alt-text=fields.image.fields.altText preserve-image-quality=fields.image.fields.preserveImageQuality}}
        {{/if}}
      {{/if}}
    </div>
  </div>
{{#if fields.useAwesomeSauceFont}}
  <div class="content-navigation-text content-navigation-text-center awesome-sauce">
    <h3 class="center-text-inner">
    {{#if fields.linkText}}
      {{{fields.linkText}}}
    {{else}}
      {{#if fields.teaserHeading}}
        {{fields.teaserHeading}}
      {{else}}
        {{fields.content.name}}
      {{/if}}
    {{/if}}
    </h3>
    {{#if fields.secondLineOfText}}
    <p class="sub-line">{{fields.secondLineOfText}}</p>
    {{/if}}
    {{#if fields.thirdLineOfText}}
    <p class="sub-line">{{fields.thirdLineOfText}}</p>
    {{/if}}
  </div>
  {{else}}
  <h3 class="content-navigation-text">
    {{#if fields.linkText}}
      {{{fields.linkText}}}
    {{else}}
      {{#if fields.teaserHeading}}
        {{fields.teaserHeading}}
      {{else}}
        {{fields.content.name}}
      {{/if}}
    {{/if}}
  </h3>
{{/if}}
</a>
