{{!--
Re-usable card for linking to posts
--}}

<article class="gh-card {{post_class}}">
    <a class="gh-card-link" href="{{url}}">
        <div class="gh-card-content">
            <div class="card-label">
                <h2 class="gh-card-title">{{title}}</h2>
                <div>
                    <span class="gh-card-meta"><time datetime="{{date format="YYYY-MM-DD"}}">{{date
                        format="D MMM YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
                </div>
                {{#if feature_image}}
                    <picture class="gh-card-picture">
                        <source
                            srcset="
                            {{img_url feature_image size="xxs" format="avif"}} 30w,
                            {{img_url feature_image size="xs" format="avif"}} 100w,
                            {{img_url feature_image size="s" format="avif"}} 300w"
                            sizes="(max-width: 480px) 100vw, 300px"
                            type="image/avif"
                            {{^if @first}}loading="lazy"{{/if}}
                        >
                        <source
                            srcset="
                            {{img_url feature_image size="xxs" format="webp"}} 30w,
                            {{img_url feature_image size="xs" format="webp"}} 100w,
                            {{img_url feature_image size="s" format="webp"}} 300w"
                            sizes="(max-width: 480px) 100vw, 300px"
                            type="image/webp"
                            {{^if @first}}loading="lazy"{{/if}}

                        >
                        <img
                            srcset="
                            {{img_url feature_image size="xxs"}} 30w,
                            {{img_url feature_image size="xs"}} 100w,
                            {{img_url feature_image size="s"}} 300w"
                            sizes="(max-width: 480px) 100vw, 300px"
                            src="{{img_url feature_image size="xs"}}"
                            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                            class="gh-card-image"
                            {{^if @first}}loading="lazy"{{/if}}
                        >
                    </picture>
                {{/if}}
            </div>
            <div class="card-content">
                <div>{{excerpt}}</div>
                <strong>Read more</strong>
            </div>
        </div>
    </a>
</article>