author-box.hbs

<section class="author">
    <div class="author-image-placeholder u-placeholder">
        <img class="author-image u-object-fit" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy">
    </div>
    <div class="author-wrapper">
        <header class="author-header">
            <h4 class="author-name"><a href="{{url}}">{{name}}</a></h4>
            <div class="author-social">
                {{#if facebook}}
                    <a class="author-social-item author-facebook" href="https://www.facebook.com/{{facebook}}" target="_blank" rel="noopener noreferrer">
                        {{> "icons/facebook"}}
                    </a>
                {{/if}}
                {{#if twitter}}
                    <a class="author-social-item author-twitter" href="https://twitter.com/{{twitter}}" target="_blank" rel="noopener noreferrer">
                        {{> "icons/twitter"}}
                    </a>
                {{/if}}
            </div>
        </header>
        {{#if location}}
            <span class="author-meta">{{location}}</span>
        {{/if}}
        <div class="author-bio">{{bio}}</div>
    </div>
</section>