<div class="overlay-crawlable-item" aria-hidden="true">
    {{#if title}}
        <h1 class="overlay-crawlable-item__title">{{title}}</h1>
    {{/if}}
    {{#if details.description.text}}
        <p class="overlay-crawlable-item__description">
                {{details.description.text}}
        </p>
    {{/if}}
    {{#if pageType}}
        <p class="overlay-crawlable-item__page-type">{{pageType}}</p>
    {{/if}}
    {{#if timeSpan}}
        <time class="overlay-crawlable-item__read-time">{{timeSpan.text}}</time>
    {{/if}}
    {{#if locationName}}
        <p class="overlay-crawlable-item__location-name">{{locationName}}</p>
    {{/if}}
    {{#if starRating}}
        <p class="overlay-crawlable-item__star-rating">{{starRating.rating}}</p>
    {{/if}}
	{{#if link}}
        <a class="overlay-crawlable-item__url" href="{{#if link.url}}{{link.url}}{{else}}#{{/if}}" tabindex="-1"></a>
	{{/if}}
    {{#if responsiveImage}}
    <div class="overlay-crawlable-item__image-url">
        {{> @cp-medium-image lowResolutionUrl=responsiveImage.lowResolutionUrl fallbackImageUrl=responsiveImage.fallbackImageUrl sources=responsiveImage.sources caption=responsiveImage.caption dynamicImage=dynamicImage isSmallImage=responsiveImage.isSmallImage forceLoad=responsiveImage.forceLoad}}
    </div>
    {{/if}}
</div>