<% if $MediaObjects %>
    <div class="social-feed">
        <div class="container">
            <h3>Connect with us</h3>
            <ul class="social-feed-links list-unstyled">
                <li>
                    <a href="{$SiteConfig.FacebookLink}" target="_blank">
                        $SVG('facebook').Size('11','19')
                        <span class="sr-only">Facebook</span>
                    </a>
                </li>
                <li>
                    <a href="{$SiteConfig.InstagramLink}" target="_blank">
                        $SVG('instagram').Size('18','18')
                        <span class="sr-only">Instagram</span>
                    </a>
                </li>
                <li>
                    <a href="{$SiteConfig.YouTubeLink}" target="_blank">
                        $SVG('youtube').Size('19','23')
                        <span class="sr-only">YouTube</span>
                    </a>
                </li>
            <li>
                    <a href="{$SiteConfig.TiktokLink}" target="_blank">
                        $SVG('tiktok').Size('19','23')
                        <span class="sr-only">YouTube</span>
                    </a>
                </li>
            </ul>
            <div class="social-tiles">
                <div class="row">
                    <% loop $MediaObjects.Limit(3) %>
                        <% if $Class == 'YoutubeVideo' %>
                            <div class="col-sm-4">
                                <a href="$Object.YoutubeLink" class="social-tile" target="_blank">
                                <span class="image"
                                      style="background-image: url('https://img.youtube.com/vi/{$Object.getYouTubeCode}/hqdefault.jpg');">
                                    $SVG('video-play').Size('110','70')
                                </span>
                                <span class="description">
                                    <% if $Object.Title %><span class="excerpt">{$Object.Title}</span><% end_if %>
                                    <% if $Object.Description %><p>{$Object.Description.LimitCharacters(150)}</p><% end_if %>
                                    <span class="type">YouTube</span>
                                </span>
                                </a>
                            </div>
                        <% else_if $Class == 'FacebookPost' %>
                            <div class="col-sm-4">
                                <a href="{$Object.URL}" class="social-tile" target="_blank">
                                    <span class="image" <% if $Object.FeaturedImage %>style="background-image: url({$Object.FeaturedImage.URL});"<% end_if %>>
                                    </span>
                                    <span class="description">
                                        <span class="excerpt">
                                            $Object.Content.FirstParagraph.LimitCharacters(140)
                                        </span>
                                        <span class="type">Facebook</span>
                                    </span>
                                </a>
                            </div>
                        <% end_if %>
                    <% end_loop %>
                </div>
            </div>
        </div>
    </div>
<% end_if %>
