<div class="grid-container">
<h2 class="navigation-dropdown__mobile-headline">{{mobileText}}</h2>
<div class="grid-x">
<div class="cell medium-8 large-8">
<div class="grid-x grid-margin-x">
<div class="cell medium-4 large-4">
<div class="navigation-dropdown__tout">
<h2 class="navigation-dropdown__title">{{tout.title}}</h2>
<div class="navigation-dropdown__subtitle">
{{tout.subtitle}}
</div>
<div class="navigation-dropdown__button">
{{> @cp-button-primary target=tout.button.target url=tout.button.url text=tout.button.text modifier="with-icon" }}
</div>
</div>
</div>
{{#each experienceBrandCards}}
<div class="cell small-6 medium-4 large-4">
<div class="collection-card__brand-wrapper">
<a href="{{url}}" class="collection-card__item collection-card__item--brand">
<div class="collection-card__image" style="background-image: url({{simpleImage.src}})"></div>
<span class="collection-card__fade"></span>
<div class="collection-card__title">{{{title}}}</div>
<div class="collection-card__map" style="background-image: url({{mapSimpleImage.src}})"></div>
<div class="collection-card__layered-image js-layered-image">
<img class="js-lazy-load-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" data-image-src="{{layeredSimpleImage.src}}" alt="{{layeredSimpleImage.altText}}">
</div>
</a>
</div>
</div>
{{/each}}
</div>
</div>
<div class="cell medium-3 large-4">
<h2 class="navigation-dropdown__title">{{destinations.title}}</h2>
{{> @cp-collection-links links=destinations.links}}
</div>
</div>
</div>