{{#ContentListingFeedSkinnyTiles}}
<li class="{{ListCssClass}}">
    {{#IsEventTile}}
    {{#IsEventDetailTile}}
    <div class="hide--me" itemscope itemtype="http://schema.org/Event">
        <link itemprop="url" href="{{AbsoluteUrl}}" />
        <h2 itemprop="name">{{Heading}}</h2>
        {{#TileImage}}
        {{#TileImage.IsSVG}}
        <img src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
        {{/TileImage.IsSVG}}
        {{^TileImage.IsSVG}}
        {{#TileImage.DisplayWidthAndHeight}}
        <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
        {{/TileImage.DisplayWidthAndHeight}}
        {{^TileImage.DisplayWidthAndHeight}}
        <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" width="{{TileImage.Width}}" height="{{TileImage.Height}}" data-width="{{TileImage.OriginalWidth}}" data-height="{{TileImage.OriginalHeight}}" /> 
        {{/TileImage.DisplayWidthAndHeight}}
        {{/TileImage.IsSVG}}
        {{/TileImage}}
        <span itemprop="description" content="{{Description}}"></span>

        {{#Location}}
        <div itemprop="location" itemscope itemtype="http://schema.org/Place">
            <span itemprop="name" content="{{Location}}"></span>
            <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                {{#Address}}
                <span itemprop="streetAddress" content="{{Address}}"></span>
                {{/Address}}
                <span itemprop="addressRegion" content="{{Location}}"></span>
            </div>
        </div>
        {{/Location}}

        {{#FirstSessionStartDateText}}
        <span itemprop="startDate" content="{{FirstSessionStartDateText}}"></span>
        {{/FirstSessionStartDateText}}

        {{#LastSessionEndDateText}}
        <span itemprop="endDate" content="{{LastSessionEndDateText}}"></span>
        {{/LastSessionEndDateText}}

        {{^IsMajorEvent}}
        {{#Cost}}
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span class="hide--me" itemprop="price" content="{{Cost}}"></span>
            <span class="hide--me" itemprop="priceCurrency" content="AUD"></span>
        </div>
        {{/Cost}}
        {{/IsMajorEvent}}

    </div>

    <a href="{{Url}}" class="link1" target="_blank">
        <div class="flexbox">
            {{#TileImage}}
            <div class="img-content" style="background-image: url('{{TileImage.Src}}')"></div>
            {{/TileImage}}
            {{^TileImage}}
            <div class="img-content"></div>
            {{/TileImage}}
            <div class="txt-content">
                {{#Heading}}
                <h2>{{Heading}}</h2>
                {{/Heading}}
                {{#EventSessionText}}
                <div class="date-loc">
                    <span class="duration">
                        {{{EventSessionText}}}
                    </span>
                    {{#Address}}
                    <span class="location">, {{Address}}</span>
                    {{/Address}}
                </div>
                {{/EventSessionText}}
                {{#EventSessionDateText}}
                <div class="date">
                    {{#IsSessionExist}}
                    {{#IsAnySessionUnavailable}}
                    {{#EventSessions}}
                    {{#IsAvailable}}
                    <span>{{EventStartDateString}}</span>
                    {{/IsAvailable}}
                    {{^IsAvailable}}
                    <span class="full">{{EventStartDateString}}</span>
                    {{/IsAvailable}}
                    {{/EventSessions}}
                    {{/IsAnySessionUnavailable}}
                    {{^IsAnySessionUnavailable}}
                    {{EventSessionDateText}}
                    {{/IsAnySessionUnavailable}}
                    {{/IsSessionExist}}
                    {{^IsSessionExist}}
                    {{#IsEventAndAvailable}}
                    <span>{{EventSessionDateText}}</span>
                    {{/IsEventAndAvailable}}
                    {{^IsEventAndAvailable}}
                    <span class="full">{{EventSessionDateText}}</span>
                    {{/IsEventAndAvailable}}
                    {{/IsSessionExist}}
                </div>
                {{/EventSessionDateText}}
                {{#IsMajorEvent}}
                {{#Fee}}
                <div class="cost">
                    <span class="amount">{{Fee}} </span>
                </div>
                {{/Fee}}
                {{/IsMajorEvent}}
                {{^IsMajorEvent}}
                {{#Fee}}
                <div class="cost">
                    {{#IsEventAndAvailable}}
                    {{#IsFreeEvent}}
                    <span class="amount">{{Fee}}</span>
                    {{/IsFreeEvent}}
                    {{^IsFreeEvent}}
                    <span class="amount">{{Fee}} /</span>
                    <span class="person">Person</span>
                    {{/IsFreeEvent}}
                    {{/IsEventAndAvailable}}
                    {{^IsEventAndAvailable}}
                    <span class="amount">Event full</span>
                    {{/IsEventAndAvailable}}
                </div>
                {{/Fee}}
                {{/IsMajorEvent}}
            </div>
        </div>
    </a>
    {{/IsEventDetailTile}}
    {{^IsEventDetailTile}}
    <a href="{{Url}}" class="link1">
        <div class="aratio--35-24">
            <div class="img-content">
                {{#TileImage}}
                {{#TileImage.IsSVG}}
                <img src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
                {{/TileImage.IsSVG}}
                {{^TileImage.IsSVG}}
                  {{#TileImage.DisplayWidthAndHeight}}
                  <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
                  {{/TileImage.DisplayWidthAndHeight}}
                  {{^TileImage.DisplayWidthAndHeight}}
                  <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" width="{{TileImage.Width}}" height="{{TileImage.Height}}" data-width="{{TileImage.OriginalWidth}}" data-height="{{TileImage.OriginalHeight}}" /> 
                  {{/TileImage.DisplayWidthAndHeight}}
                {{/TileImage.IsSVG}}
                {{/TileImage}}
            </div>
            <div class="txt-content over">
                {{#EventStartDateDay}}
                <h2 class="heading">{{EventStartDateDay}}</h2>
                {{/EventStartDateDay}}
                <span class="line"></span>
                <h2 class="heading">{{EventStartDateMonth}}</h2>
            </div>
        </div>
        <div class="txt-content">
            <h2 class="heading">{{Heading}}</h2>
        </div>
    </a>
    <a href="{{SectionUrl}}" class="link2 section">{{Breadcrumb}}</a>
    {{/IsEventDetailTile}}
    {{/IsEventTile}}

    {{^IsEventTile}}
    {{#IsLearningTile}}
    {{#IsSolidTile}}
    <div class="txt-content">
        <h2 class="heading">{{Heading}}</h2>
        <a href="{{Url}}" class="link1">Read more</a>
    </div>
    <a href="javascript:void(0)">
        <span class="{{FavouriteCssClass}}" data-type="{{FavouriteDataType}}" data-id="{{ItemShortId}}"></span>
    </a>
    <a href="{{SectionUrl}}" class="link2 section">{{Breadcrumb}}</a>
    {{/IsSolidTile}}
    {{^IsSolidTile}}
    <a href="{{Url}}" class="link1">
        <div class="aratio--35-24">
            <div class="img-content">
                {{#TileImage}}
                {{#TileImage.IsSVG}}
                <img src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
                {{/TileImage.IsSVG}}
                {{^TileImage.IsSVG}}
                {{#TileImage.DisplayWidthAndHeight}}
                <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
                {{/TileImage.DisplayWidthAndHeight}}
                {{^TileImage.DisplayWidthAndHeight}}
                <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" width="{{TileImage.Width}}" height="{{TileImage.Height}}" data-width="{{TileImage.OriginalWidth}}" data-height="{{TileImage.OriginalHeight}}" /> 
                {{/TileImage.DisplayWidthAndHeight}}
                {{/TileImage.IsSVG}}
                {{/TileImage}}
            </div>
            {{#SkillLevel}}
            <div class="txt-content over">
                <h2 class="heading">{{SkillLevel}}</h2>
                <span class="line"></span>
            </div>
            {{/SkillLevel}}
        </div>
        <div class="txt-content">
            {{#Heading}}
            <h2 class="heading">{{Heading}}</h2>
            {{/Heading}}
            {{#ShowArticleDate}}
            <p class="desc">{{PublicationDateText}}</p>
            {{/ShowArticleDate}}
            <p class="desc">{{Description}}</p>
        </div>
    </a>
    <a href="javascript:void(0)">
        <span class="{{FavouriteCssClass}}" data-type="{{FavouriteDataType}}" data-id="{{ItemShortId}}"></span>
    </a>
    <a href="{{SectionUrl}}" class="link2 section">{{Breadcrumb}}</a>
    {{/IsSolidTile}}
    {{/IsLearningTile}}

    {{^IsLearningTile}}
    {{#IsSolidTile}}
    <div class="txt-content">
        <h2 class="heading">{{Heading}}</h2>
        <a href="{{Url}}" class="link1">Read more</a>
    </div>
    <a href="javascript:void(0)">
        <span class="{{FavouriteCssClass}}" data-type="{{FavouriteDataType}}" data-id="{{ItemShortId}}"></span>
    </a>
    <a href="{{SectionUrl}}" class="link2 section">{{Breadcrumb}}</a>
    {{/IsSolidTile}}

    {{^IsSolidTile}}
    {{#VideoUrl}}
    <div class="aratio--35-24">
        <div class="img-content">
            {{#TileImage}}
            {{#TileImage.IsSVG}}
            <img src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
            {{/TileImage.IsSVG}}
            {{^TileImage.IsSVG}}
            {{#TileImage.DisplayWidthAndHeight}}
            <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
            {{/TileImage.DisplayWidthAndHeight}}
            {{^TileImage.DisplayWidthAndHeight}}
            <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" width="{{TileImage.Width}}" height="{{TileImage.Height}}" data-width="{{TileImage.OriginalWidth}}" data-height="{{TileImage.OriginalHeight}}" /> 
            {{/TileImage.DisplayWidthAndHeight}}
            {{/TileImage.IsSVG}}
            {{/TileImage}}
        </div>
        <div class="video">
            <span class="play-btn"></span>
            <iframe width="800" height="600" src="" frameborder="0" allowfullscreen="" data-src="{{VideoUrl}}" data-aspect="1.3333333333333333"></iframe>
        </div>
    </div>
    <a href="{{Url}}">
        <div class="txt-content">
            <h2 class="heading">{{Heading}}</h2>
            <p class="desc">{{Description}}</p>
        </div>
    </a>
    <a href="javascript:void(0)">
        <span class="{{FavouriteCssClass}}" data-type="{{FavouriteDataType}}" data-id="{{ItemShortId}}"></span>
    </a>
    <a href="{{SectionUrl}}" class="link2 section">{{Breadcrumb}}</a>
    {{/VideoUrl}}
    {{^VideoUrl}}
    <a href="{{Url}}" class="link1">
        <div class="aratio--35-24">
            <div class="img-content">
                {{#TileImage}}
                {{#TileImage.IsSVG}}
                <img src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
                {{/TileImage.IsSVG}}
                {{^TileImage.IsSVG}}
                {{#TileImage.DisplayWidthAndHeight}}
                <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" /> 
                {{/TileImage.DisplayWidthAndHeight}}
                {{^TileImage.DisplayWidthAndHeight}}
                <img class="imgfix lazyload" src="{{TileImage.ThumbnailSrc}}" data-src="{{TileImage.Src}}" alt="{{TileImage.Alt}}" width="{{TileImage.Width}}" height="{{TileImage.Height}}" data-width="{{TileImage.OriginalWidth}}" data-height="{{TileImage.OriginalHeight}}" /> 
                {{/TileImage.DisplayWidthAndHeight}}
                {{/TileImage.IsSVG}}
                {{/TileImage}}
            </div>
        </div>
        <div class="txt-content">
            <h2 class="heading">{{Heading}}</h2>
            {{#ShowArticleDate}}
            <p class="desc">{{PublicationDateText}}</p>
            {{/ShowArticleDate}}
            <p class="desc">{{Description}}</p>
        </div>
    </a>
    <a href="javascript:void(0)">
        <span class="{{FavouriteCssClass}}" data-type="{{FavouriteDataType}}" data-id="{{ItemShortId}}"></span>
    </a>
    <a href="{{SectionUrl}}" class="link2 section">{{Breadcrumb}}</a>
    {{/VideoUrl}}
    {{/IsSolidTile}}
    {{/IsLearningTile}}
    {{/IsEventTile}}

</li>
{{/ContentListingFeedSkinnyTiles}}