{{#ContentListingFeedSkinnyTiles}}
<li class="tile--300" data-filter-key="{{FilterKeys}}">
    <div class="aratio--35-24">
        {{#HasFlagImage}}
        <div class="new-product-img">
            {{#FlagImage.Src}}
            <img class="img--right" src="{{FlagImage.Src}}" />
            {{/FlagImage.Src}}
        </div>
        {{/HasFlagImage}}


        {{#TileImage.Src}}
        {{#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.Src}}
    </div>
    <div class="txt-content">
        <h2 class="heading">{{Heading}}</h2>
        <p class="desc">{{ShortDescription}}</p>
        <div class="combo flexbox--center">
            {{#HoverItem}}
            <div class="link__cta flexbox">


                {{#HoverItem.IsHover}}
                {{#HoverItem.HasHoverConetnt}}
                {{#HoverItem.HoverDisplayText}}
                <div data-type="cta-text" class="hover">
                    {{HoverItem.HoverDisplayText}}
                    <div class="hover-content">

                        {{#HoverItem.HoverContentImage}}
                        {{#HoverItem.HoverContentImage.Url}}
                        <img src="{{HoverItem.HoverContentImage.Url}}" />
                        {{/HoverItem.HoverContentImage.Url}}
                        {{/HoverItem.HoverContentImage}}
                        {{#HoverItem.HoverContentText}}
                        <p>{{HoverItem.HoverContentText}}</p>
                        {{/HoverItem.HoverContentText}}

                    </div>

                </div>
                {{/HoverItem.HoverDisplayText}}

                {{#HoverItem.HoverDisplayImage}}
                {{#HoverItem.HoverDisplayImage.Url}}
                <div data-type="cta-image hover">
                    <img src="{{HoverItem.HoverDisplayImage.Url}}">
                    <div class="hover-content">

                        {{#HoverItem.HoverContentImage}}
                        {{#HoverItem.HoverContentImage.Url}}
                        <img src="{{HoverItem.HoverContentImage.Url}}" />
                        {{/HoverItem.HoverContentImage.Url}}
                        {{/HoverItem.HoverContentImage}}
                        {{#HoverItem.HoverContentText}}
                        <p>{{HoverItem.HoverContentText}}</p>
                        {{/HoverItem.HoverContentText}}

                    </div>
                </div>
                {{/HoverItem.HoverDisplayImage.Url}}
                {{/HoverItem.HoverDisplayImage}}

                {{/HoverItem.HasHoverConetnt}}

                {{^HoverItem.HasHoverConetnt}}

                {{#HoverItem.HoverDisplayText}}
                <div data-type="cta-text">
                    {{HoverItem.HoverDisplayText}}
                </div>
                {{/HoverItem.HoverDisplayText}}


                {{#HoverItem.HoverDisplayImage}}
                {{#HoverItem.HoverDisplayImage.Url}}
                <div data-type="cta-image">
                    <img src="{{HoverItem.HoverDisplayImage.Url}}" />
                </div>
                {{/HoverItem.HoverDisplayImage.Url}}
                {{/HoverItem.HoverDisplayImage}}


                {{/HoverItem.HasHoverConetnt}}


                {{/HoverItem.IsHover}}
                {{^HoverItem.IsHover}}
                {{#HoverItem.Link}}
                {{#HoverItem.Link.Url}}
                {{#HoverItem.LinkText}}
                <div data-type="link-text"><a href="{{HoverItem.Link.Url}}">{{HoverItem.LinkText}}</a></div>
                {{/HoverItem.LinkText}}
                {{#HoverItem.LinkButtonText}}
                <div data-type="link-text"><a href="{{HoverItem.Link.Url}}">{{HoverItem.LinkButtonText}}</a></div>
                {{/HoverItem.LinkButtonText}}
                {{#HoverItem.LinkImage}}
                {{#HoverItem.LinkImage.Url}}
                <div data-type="link-image">
                    <a href="{{HoverItem.Link.Url}}">
                        <img src="{{HoverItem.LinkImage.Url}}" />
                    </a>
                </div>
                {{/HoverItem.LinkImage.Url}}
                {{/HoverItem.LinkImage}}
                {{/HoverItem.Link.Url}}
                {{/HoverItem.Link}}

                {{#HoverItem.LinkTelephone}}
                <div data-type="link-phone">
                    <a href="tel:{{HoverItem.LinkTelephone}}" class="telephone">
                        <span class="icon-svg-phone"></span>
                        {{#HoverItem.LinkTelephoneText}}
                        {{HoverItem.LinkTelephoneText}}
                        {{/HoverItem.LinkTelephoneText}}

                    </a>
                </div>
                {{/HoverItem.LinkTelephone}}


                {{/HoverItem.IsHover}}
            </div>
            {{/HoverItem}}

            {{#HideStarRating}}
            {{/HideStarRating}}
            {{^HideStarRating}}
            {{#EAN}}
            <div class="review bvinlinerating">
                <input type="hidden" id="productEANValue-{{EAN}}" value="{{EAN}}" />
                <div id="BVRRInlineRating-{{EAN}}" data-ean="{{EAN}}" style="padding-top:12px" data-product='{{EAN}}'></div>
            </div>
            {{/EAN}}
            {{/HideStarRating}}
        </div>
            
    </div>

        
        <div class="list-content">
            {{#ProductTileSpecifications}}
            {{#ProductTileSpecificationItemList}}
            <div class="list-content-row">
                {{#IconUrl}}
                <div class="list-content-cell">
                    <img class="list-content-icon" src="{{IconUrl}}">
                </div>
                {{/IconUrl}}

                <div class="list-content-cell">
                    {{Name}}  {{Value}}
                </div>
            </div>
            {{/ProductTileSpecificationItemList}}
            {{/ProductTileSpecifications}}
        </div>
        <div class="price-content">
        </div>
        <div class="link-content">
            <a href="{{Url}}" class="link1">View Details</a>
        </div>
</li>
{{/ContentListingFeedSkinnyTiles}}