<div class="container mt-5" style="max-width:600px;">
    <div class="card" style="border-color:{{c!accent color!}}; border-radius:7rem; overflow:hidden;">
        <div class="row">
            <div class="col row">
                <div class="col">
                    <div class="pl-5 pt-4 pb-lg-4 pb-2">
                        <h1 class="display-4">
                            <i class="fa-light fa-heart" style="font-size:.8em;"></i>
                            {{!name!}} 
                            <span style="font-size:.5em;">
                                {{!pronouns!}}. {{!age!}}.
                            </span>
                        </h1>
                        <p>
                            {{l!description!}}
                        </p>
                    </div>
                </div>
                <div class="col-lg-1">
                    <div class="text-center align-items-center justify-content-center h-100 pb-4 pb-lg-0">
                        <div>
                            <a href="{{u!link 1 URL!}}" class="d-lg-block" style="color:inherit;">
                                <i class="fa-brands fa-instagram fa-fw"></i>
                            </a>
                            <a href="{{u!link 2 URL!}}" class="d-lg-block" style="color:inherit;">
                                <i class="fa-brands fa-twitter fa-fw"></i>
                            </a>
                            <a href="{{u!link 3 URL!}}" class="d-lg-block" style="color:inherit;">
                                <i class="fa-brands fa-deviantart fa-fw"></i>
                            </a>
                            <a href="{{u!link 4 URL!}}" class="d-lg-block" style="color:inherit;">
                                <i class="fa-solid fa-id-card fa-fw"></i>
                            </a>
                            <a title="{{!discord tag!}}" class="d-lg-block tooltipster" style="color:inherit;">
                                <i class="fa-brands fa-discord fa-fw"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-3">
                <div class="h-100 align-items-center justify-content-center" style="background:{{c!accent color!}} url({{u!side image!}}) center; background-size:cover; background-blend-mode:multiply;">
                    <div class="justify-content-center">
                        <div style="position:absolute; margin-top:-17px; margin-left:20px; height:34px; width:34px; overflow:hidden;">
                            <audio controls="" loop="" style="width:100px; height:50px; opacity:0; margin:-8px -9px;">
                                <source src="{{u!music mp3 URL!}}">
                            </audio>
                        </div>
                    </div>
                    <i class="fa-solid fa-music d-block text-dark fa-2x fa-fw"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-3 text-center">
        <a href="https://toyhou.se/HTMLobster" title="html by noll" class="tooltipster">
            <i class="fa-solid fa-lobster"></i>
        </a>
    </div>
</div>