<section class="simple-hero">
    <div class="wide-container simple-hero-inner">
        <div class="text-card">
            <h1 class="text-card-heading">{{name}}</h1>

            <div class="text-card-paragraph">
                <p>
                    {{bio}}
                </p>
            </div> 

            <div id="author-socials" class="socials simple-layout-socials">
                {{#if location}}
                    <div class="social location-social" aria-label="Location">
                        <div class="social-inner">
                            {{> "icons/location-icon"}}
                        </div>
                        <span class="social-text">
                            {{location}}
                        </span>
                    </div>                                          
                {{/if}}

                {{#if facebook}}
                    <a href="{{facebook_url}}" target="_blank" class="social" aria-label="Facebook">
                        <div class="social-inner">
                            {{> "icons/facebook-icon"}}
                        </div>
                        <span class="social-text">
                            {{t "Facebook"}}
                        </span>
                    </a>                                          
                {{/if}}   

                {{#if twitter}}
                    <a href="{{twitter_url}}" target="_blank" class="social" aria-label="Twitter">
                        <div class="social-inner social-inner-smaller">
                            {{> "icons/twitter-icon"}}
                        </div>
                        <span class="social-text">
                            {{t "Twitter/X"}}
                        </span>
                    </a>
                {{/if}}   

                {{#if website}}
                    <a href="{{website}}" target="_blank" class="social" aria-label="Website URL">
                        <div class="social-inner">
                            {{> "icons/link-icon"}}
                        </div>
                        <span class="social-text">
                            {{t "Website"}}
                        </span>
                    </a>
                {{/if}}
            </div>
        </div>
    </div> 
</section>