<div class="m-2 m-lg-4">
    <div class="col-12 mx-5 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
        <h1 class="text-center">Work in Progress</h1>
        <hr>
        {LOOP}
            <div class="wip-project">
                <h3 class="wip-project-title text-center text-md-start text-primary">{title}</h3>
                <div class="d-flex justify-content-between">
                    <small><span class="text-muted">Started: </span><i class="">{prettyStart}</i></small>
                    <small><span class="text-muted">Finished: </span><i class="">{prettyEnd}</i></small>
                </div>
                <div class="progress mt-2">
                    <div class="progress-bar" role="progressbar" style="width: {progress}%" aria-valuenow="{progress}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="well my-3">
                    {description}
                </div>
            </div>
            <div class="col-6 offset-3 my-2">
                <hr>
            </div>
        {/LOOP}
        {ALT}
            <div class="wip-project">
                <p>None Found</p>
            </div>
        {/ALT}
    </div>
</div>