{{!--Re-usable card for linking to posts--}}
<article class="gh-card {{post_class}} {{#is "post"}}gh-read-next-post{{/is}}">
    <div class="gh-card-image-video-outer">
        <div class="gh-card-img-video-wrapper">
            {{#if feature_image}}
            <a class="gh-card-image-wrapper-link" href="{{url}}" aria-label="{{title}} {{t "post link"}}">
                <picture>
                    <source srcset="
                    {{img_url feature_image size="1600" format="webp"}} 1600w, 
                    {{img_url feature_image size="1200" format="webp"}} 1200w, 
                    {{img_url feature_image size="1000" format="webp"}} 1000w, 
                    {{img_url feature_image size="800" format="webp"}} 800w, 
                    {{img_url feature_image size="600" format="webp"}} 600w, 
                    {{img_url feature_image size="500" format="webp"}} 500w" 
                    sizes="(max-width: 500px) 92vw, 30vw" type="image/webp">
                    <img class="gh-card-image" 
                    srcset="
                    {{img_url feature_image size="1600"}} 1600w, 
                    {{img_url feature_image size="1200"}} 1200w, 
                    {{img_url feature_image size="1000"}} 1000w, 
                    {{img_url feature_image size="800"}} 800w, 
                    {{img_url feature_image size="600"}} 600w, 
                    {{img_url feature_image size="500"}} 500w"  
                    sizes="(max-width: 500px) 92vw, 30vw" 
                    src="{{img_url feature_image size="1600"}}" 
                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}} {{t "post image"}}{{/if}}" loading="lazy">
                </picture>
            </a>
            {{else}}
            <a class="gh-card-image-wrapper-link--noImage" href="{{url}}" aria-label="{{title}} {{t "post link"}}">
                {{#if @site.logo}}
                    {{#if @custom.dark_mode_logo}}
                        <img src="{{img_url @custom.dark_mode_logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-card-image-wrapper-link--noImage__logo-dark">
                    {{/if}}
                        <img src="{{img_url @site.logo}}" alt="{{@site.title}} {{t "icon"}}" class="gh-card-image-wrapper-link--noImage__logo">
                {{else}}
                    <h3 class="gh-card-image-wrapper-link--noImage__name">{{@site.title}}</h3>
                {{/if}}
            </a>
            {{/if}}
            {{#has tag="#video"}}
                <div class="gh-card-video-wrapper">
                    {{content}}
                </div>
                 <a class="gh-card-video-link" href="{{url}}" aria-label="{{title}} {{t "post link"}}"></a>
            {{/has}}
        </div>
    </div>
    <div class="gh-card-content">
        <div class="gh-card-content-main">
            <div class="gh-card-tags">
                {{#if featured}}
                    <span class="gh-card-tag-icon gh-card-tag-icon--featured" tabindex="0">
                        {{> 'icons/lightning'}}
                        <div class="post-tag-icon__tooltip">
                            <div class="post-tag-icon__tooltip-bg"></div>
                            <span class="post-tag-icon__tooltip-span">{{t "Featured post"}}</span>
                        </div>
                    </span>
                {{/if}}
                {{^match visibility 'public'}}
                    <span class="gh-card-tag-icon gh-card-tag-icon--private" tabindex="0">
                        {{> 'icons/lock-small'}}
						<span class="gh-card-tag-icon__subscribe">&nbsp; Sign Up to Read</span>
                        <div class="post-tag-icon__tooltip">
                            <div class="post-tag-icon__tooltip-bg"></div>
                            <span class="post-tag-icon__tooltip-span">
                                {{#match visibility "=" "members"}}
                                    {{t "Only for members"}}
                                {{/match}}
                                {{#match visibility "=" "paid"}}
                                    {{t "Only for paid members"}}
                                {{/match}}
                                {{#match visibility "=" "tiers"}}
                                {{t "For specific tier(s) members"}}
                                {{/match}}
                            </span>
                        </div>
                    </span>
                {{/match}}
                {{#foreach tags}}
                <a class="gh-card-tag" href="{{url}}" aria-label="{{name}} {{t "tag link"}}">
                    {{name}}
                </a>
                {{/foreach}}
            </div>
            <a href="{{url}}" aria-label="{{title}} {{t "post link"}}">
                <h2 class="gh-card-title">{{title}}</h2>
            </a>
        </div>
        <span class="gh-post-meta">{{t "Published on"}} <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D,
                YYYY"}}</time> </span>
    </div>
</article>
