<div class="container mt-5" style="max-width:600px;">
    <div class="card p-3 bg-faded">
        <div class="row">
            <div class="col-md-4">
                <div class="card p-2">
                    <div class="rounded" style="background:{{c!accent!}} url({{u!side image!}}) center; background-size:cover; padding:50%; background-blend-mode:multiply;"></div>
                </div>
                <div class="justify-content-between mx-3 mx-md-0">
                    <a href="{{u!link 1 url!}}" class="btn p-0 mt-2" style="color:{{c!accent!}}; font-size:1.5em;">
                        <i class="fa-brands fa-instagram fa-fw"></i>
                    </a>
                    <a href="{{u!link 2 url!}}" class="btn p-0 mt-2" style="color:{{c!accent!}}; font-size:1.5em;">
                        <i class="fa-brands fa-twitter fa-fw"></i>
                    </a>
                    <a href="{{u!link 3 url!}}" class="btn p-0 mt-2" style="color:{{c!accent!}}; font-size:1.5em;">
                        <i class="fa-brands fa-deviantart fa-fw"></i>
                    </a>
                    <a href="{{u!link 4 url!}}" class="btn p-0 mt-2" style="color:{{c!accent!}}; font-size:1.5em;">
                        <i class="fa-solid fa-id-card fa-fw"></i>
                    </a>
                    <a href="#" title="{{!discord tag!}}" class="btn p-0 mt-2 tooltipster" style="color:{{c!accent!}}; font-size:1.5em;">
                        <i class="fa-brands fa-discord fa-fw"></i>
                    </a>
                </div>
            </div>
            <div class="col-md-auto">
                <div class="card h-100 bg-faded border-left-0 rounded-0 hidden-sm-down"></div>
                <div class="card bg-faded border-left-0 border-bottom-0 border-right-0 my-3 rounded-0 hidden-md-up"></div>
            </div>
            <div class="col">
                <h1 class="display-3 mb-0" style="color:{{c!accent!}}; font-family:'Courier New',monospace;">
                    {{!username!}}
                </h1>
                <h2 class="font-weight-light font-italic">
                    {{!pronouns!}}
                </h2>
                <div class="card d-block bg-faded border-0 d-lg-flex flex-column mt-3">
                    <div class="d-block" style="flex:1 1 108px; min-height:108px; overflow-y:auto;">
                        {{%description%
                        <p>
                            {{l%paragraph%}}
                        </p>
                        %end%}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        {{%featured characters%
        <div class="col-md-3 col-6 mt-3">
            <div class="card bg-faded p-2">
                <div class="rounded" style="background:linear-gradient(to {{%gradient direction - e.g. bottom right%}}, {{c!accent!}} 50%,rgba(0,0,0,0) 50%);">
                    <a class="rounded btn border-0 h-100" href="{{%character link%}}" style="background:url({{u%icon image%}}) center; background-size:cover; mix-blend-mode:multiply; padding:50%;"></a>
                </div>
            </div>
        </div>
        %end%}}
    </div>
</div>