Nascent Tower Memberlist

<script>
$(document).ready(function(){
$('.mbuser span').each(function(){
var bodyColor = $(this).css('color');
$(this).parents('.member').attr('style', '--groups: ' + bodyColor + ';');
});
$('.mbcontact img[src*="contact_pm"]').parent().attr('title', 'Mensaje Privado').html('DM');
});
</script>
<style>
#memberlist {
    --border1: 1px solid #fff;
    --border2: 1px solid #0a0a0a;
    --tbckg1: rgba(0,0,0,0.25);
    --effect: blur(3px);
    --accent1:#74a690;
    --accent2:#506e61;
    --bodywidth:750px;
    font: 10px 'Open Sans';
    color: #aaa;
}

#memberlist {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.mbforms {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
  width:100%;
  height:100%;
  box-sizing:border-box;
}

#memberlist form {
    flex-shrink: 0;
    flex-grow: 1;
    align-self: stretch;
    padding: 0 20px 0 0;
    border-right: var(--border1);
    margin-right: 20px;
}

.mbody {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: var(--bodywidth);
}

.member {
    width: calc(25% - 15px);
    overflow: hidden;
    margin-right: 20px;
    margin-top: 20px;
}

.mb1 {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    border: var(--border2);
}

.member:nth-of-type(4n+0), .member:last-of-type {
    margin-right: 0;
}

.mb1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.mb1:before {content: "";width: 15px;height: 100%;display: block;position: absolute;right: 0;top: 0;background: var(--groups);}

.mb2 {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--border2);
    background: var(--tbckg1);
    backdrop-filter: var(--effect);
    padding: 10px;
}

.member:nth-of-type(-n+4) {
    margin-top: 0;
}

.mbcontact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.mbcontact a {
    background: var(--groups);
    border-radius: 100%;
    height: 20px;
    width: 20px;
    font-size: 8px;
    text-align: center;
    line-height: 20px;
    font-weight: 700;
    color: white;
    text-shadow: 1px 1px rgba(0,0,0,0.2), -1px 1px rgba(0,0,0,0.2), 1px -1px rgba(0,0,0,0.2), -1px -1px rgba(0,0,0,0.2);
}

.mbcontact a:first-of-type {
    margin-bottom: 5px;
}

.mbcontact a:first-of-type:last-of-type {
    margin-bottom: 0;
}

.mbuser {
    text-transform: uppercase;
    font: 13px 'Poppins';
    letter-spacing: -1px;
}

.mbinfo {
    text-transform: uppercase;
    font-size: 8px;
}

.mbdata {
    flex-grow: 1;
}

.mbform span {
    text-transform: uppercase;
    display: block;
    font-weight: 700;
    font-size: 9px;
}

.mbform {
    text-align: center;
    margin-bottom: 20px;
    align-self: stretch;
}

.mbform select, .mbform input[type="text"] {
    border: var(--border2);
    backdrop-filter: var(--effect);
    background: var(--tbckg1);
    font: 9px 'Open Sans';
    color: #aaa;
    padding: 5px;
    margin-top: 5px;
    box-sizing: border-box;
    width: 100%;
}

.mbforms input[type="submit"] {
    border: 1px solid var(--accent2);
    font-size: 10px;
    background: var(--accent1);
    text-transform: uppercase;
    color: white;
    text-shadow: 1px 1px var(--accent2), -1px 1px var(--accent2), 1px -1px var(--accent2), -1px -1px var(--accent2);
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
}
.mbpagination {
    position: absolute;
    bottom: 0;
    background: var(--tbckg1);
    border: var(--border2);
    backdrop-filter: var(--effect);
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
}

.mbpagination a {
    color: var(--accent1);
}

.mbpagination a[href*="javascript"] {
    color: #aaa!important;
}

.mbpagination a:hover {
    color: var(--accent2);
}

form[name="go_page"] {
    background: #151515;
    border: 1px solid #0a0a0a;
    font: 8px 'Open Sans';
    text-transform: uppercase;
}

form[name="go_page"] td.row1 {
    background: transparent;
}

form[name="go_page"] input {
    border: 1px solid #0a0a0a;
    background: #222;
    padding: 5px;
    margin: 3px 0;
    color: #aaa;
    text-transform: uppercase;
    font-weight: 700;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@700&display=swap" rel="stylesheet"/>
<div id="memberlist">
<form action="{S_MODE_ACTION}" method="get">
<div class="mbforms">
<div class="mbform">
<span>{L_USER_SELECT}</span>
<input type="text" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
</div>
<div class="mbform">
<span>{L_SELECT_SORT_METHOD}</span>
{S_MODE_SELECT}
</div>
<div class="mbform">
<span>{L_ORDER}</span>
{S_ORDER_SELECT}
</div>
{S_HIDDEN_SID}
<input type="submit" name="submit" value="{L_SUBMIT}" />
<!-- BEGIN switch_pagination -->
<div class="mbpagination">{PAGINATION}</div>
<!-- END switch_pagination -->
</div>
</form>
<div class="mbody">
<!-- BEGIN memberrow -->
<div class="member">
<div class="mb1">
{memberrow.AVATAR_IMG}
</div>
<div class="mb2">
<div class="mbdata">
<div class="mbuser">{memberrow.USERNAME}</div>
<div class="mbinfo">Última visita: {memberrow.LASTVISIT}<br/>{memberrow.POSTS} POSTS</div>
</div>
<div class="mbcontact">
<a href="{memberrow.U_VIEWPROFILE}" title="Perfil de usuario">PF</a>
{memberrow.PM_IMG}
</div>
</div>
</div>
<!-- END memberrow -->
<!-- BEGIN switch_no_user -->
<strong class="nouser">{switch_no_user.L_NO_USER}</strong>
<!-- END switch_no_user -->
</div>
</div>