{{{customeditframe.editframeStart}}}
<div class="trip-ideas-hero" data-module="tripIdeasHero" {{#if backgroundResponsiveImage.dominantColour}}style="background-color: {{backgroundResponsiveImage.dominantColour}}"
            {{/if}}>
    <div class="trip-ideas-hero__image">
        {{#if backgroundResponsiveImage}}
        {{> @cp-medium-image backgroundResponsiveImage}}
        {{/if}}
        <div class="trip-ideas-hero__gradient" {{#if backgroundResponsiveImage.dominantColour}}style="background: linear-gradient(180deg, rgba(0,0,0,0) 65%, {{backgroundResponsiveImage.dominantColour}})"
    {{/if}}></div>
    </div>
    <div class="trip-ideas-hero__info">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell medium-10 large-8">
                    <div class="trip-ideas-hero__trip-detail trip-ideas-hero__trip-detail--{{travelMethod}}">
                        <span class="trip-ideas-hero__trip-duration">{{tripDuration}}</span>
                        <span class="trip-ideas-hero__trip-distance">{{tripDistance}}</span>
                    </div>
                    <h1 class="trip-ideas-hero__title">{{{title}}}</h1>
                    <div class="trip-ideas-hero__from-to">{{{fromToText}}}</div>
                    <div class="trip-ideas-hero__nearest-airport"><span class="trip-ideas-hero__nearest-airport-title">{{nearestAirportTitle}}</span>
                        {{{nearestAirport}}}
                    </div>
                    <div class="trip-ideas-hero__attractions">
                        <span class="trip-ideas-hero__attractions-title">{{attractionsTitle}}</span>
                        <span class="trip-ideas-hero__attractions-list">{{attractions}}</span>
                    </div>
                </div>
            </div>
            {{> @cp-collage-elements}}
        </div>
    </div>
</div>
{{{customeditframe.editframeStop}}}