<div class="listing__content">
	<div class="ferry-route-cards">
		{{#if ports.length}}
		<div class="ferry-route-cards__group">
			{{#each ports}}
			<hr class="spacer-lg">
			<div class="grid-container spacer-xl">
				<header class="grid-x spacer-md">
					<div class="cell small-8 medium-10">
						<div class="grid-x spacer-xxs">
							<h2 class="ferry-route-cards__title">{{title}}</h2>
						</div>
						<div class="grid-x spacer-md">
							<div class="ferry-route-cards__airport">
								<div class="ferry-route-cards__card-meta">{{name}}</div>
							</div>
						</div>
						<hr class="ferry-route-card__separator">
					</div>
					<div class="cell small-4 medium-2">
						<div class="ferry-route-cards__map">
							<img src="{{map}}" alt="{{name}}">
						</div>
					</div>
				</header>
				<ul class="ferry-route-cards__list">
					{{#each providers}}
					<div class="ferry-card spacer-xs">
						<div class="ferry-card__inner">
							<div class="grid-x spacer-sm">
								<div class="ferry-card__logo" style="background-image: url({{logo}});"></div>
								<div class="ferry-card__name">{{name}}</div>
							</div>
							<div class="grid-x">
								{{#each routes}}
								<div class="grid-x ferry-card__provider-inner">
									<div class="ferry-card__origin"><span>{{origin}}</span></div>
									<div class="ferry-card__duration">{{duration}}</div>
									<div class="ferry-card__destination"><span>{{destination}}</span></div>
								</div>
								{{/each}}
							</div>
							{{#if button}}
							<div class="grid-x">
								{{> @cp-button-secondary target=button.target url=button.url text=button.text modifier="default ferry-card__button"}}
							</div>
							{{/if}}
						</div>
					</div>
					{{/each}}
				</ul>
			</div>
			{{/each}}
		</div>
		{{else}}
		<p class="ferry-route-cards__no-results">No results were found</p>
		{{/if}}
	</div>
</div>