<div class="container mt-5" style="max-width:600px;">
    <div class="row no-gutters">
        <div class="col-lg-3 align-items-center">
            <div class="card p-3 my-3 mr-lg-n4 mx-auto" style="position:relative; z-index:2; box-shadow:.25rem .25rem {{c!accent!}};">
                <div class="card" style="padding:50%; background:{{c!accent!}} url({{u!side image!}}) center; background-size:cover; background-blend-mode:multiply;"></div>
                <div class="text-center font-italic mt-2">
                    <p>
                        {{!short quote!}}
                    </p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card py-3 pl-lg-5 pl-3 pr-3 h-100" style="box-shadow:.25rem .25rem {{c!accent!}};">
                <div>
                    <h1 class="display-4">
                        <span style="color:{{c!accent!}}">
                            {{!name!}}
                        </span>
                        <span class="pl-sm-3 float-sm-right" style="font-size:.7em; line-height:1.8em;">
                            ({{!pronouns!}})
                        </span>
                    </h1>
                    {{%description%
                    <p>
                        {{l%paragraph%}}
                    </p>
                    %end%}}
                </div>
                <div class="row mt-auto">
                    <div class="col-sm-3 col-6 mt-3">
                        <a href="{{u!link 1 URL!}}" class="card btn w-100" style="color:{{c!accent!}};">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    </div>
                    <div class="col-sm-3 col-6 mt-3">
                        <a href="{{u!link 2 URL!}}" class="card btn w-100" style="color:{{c!accent!}};">
                            <i class="fa-brands fa-deviantart"></i>
                        </a>
                    </div>
                    <div class="col-sm-3 col-6 mt-3 mx-auto">
                        <a href="{{u!link 3 URL!}}" class="card btn w-100" style="color:{{c!accent!}};">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                    </div>
                    <div class="col-sm-3 col-6 mt-3">
                        <a title="{{!discord tag!}}" href="#" class="card btn w-100 tooltipster" style="color:{{c!accent!}};">
                            <i class="fa-brands fa-discord"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-3 text-center">
        <a href="htmlobster" title="html by noll" class="tooltipster">
            <i class="fa-solid fa-lobster"></i>
        </a>
    </div>
</div>