<div class="extra-small-card">
    <small class="small-card-small-text">
        {{#unless access}}
            <span class="restricted-access-icon access-icon-smaller">
                {{> "icons/lock-icon" }}
            </span>
        {{/unless}}

        {{#primary_tag}}
            <a href="{{url}}" class="hover-underline">{{name}}</a>
            <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
        {{/primary_tag}}
        
        <span class="small-card-date">
            {{date published_at format="MMM DD, YYYY"}}  
        </span>
    </small>
 
    <a href="{{url}}" class="small-text hover-underline extra-small-card-heading two-lines-mobile">
        {{title}}
    </a>

    {{#if feature_image}}
        <a href="{{url}}" class="extra-small-card-image-link hover-image-opacity">                   
            <figure class="extra-small-card-image-wrapper">
                <img             
                    srcset="{{img_url feature_image size="xxs" format="webp"}} 100w,
                            {{img_url feature_image size="xs" format="webp"}} 150w,
                            {{img_url feature_image size="s" format="webp"}} 320w,
                            {{img_url feature_image size="xm" format="webp"}} 440w,
                            {{img_url feature_image size="m" format="webp"}} 600w"
                    src="{{img_url feature_image size="s"}}"
                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                    loading="lazy"
                    decoding="async"
                >
            </figure> 
        </a>                            
    {{else}}
        <a href="{{url}}" class="big-slide-placeholder hover-image-opacity">
            {{> "icons/placeholder" }}
        </a>                    
    {{/if}}

    <div class="extra-small-card-mobile-excerpt">
        <p class="{{#if @custom.use_initials}} initial-paragraph{{/if}} three-lines initial-paragraph-reset">
            {{excerpt}}
        </p>
    </div>
</div>