шаблон список персов

[html]
<style>

userlist {
display: flex;
width: 977px;
height: 539px;
margin: auto !important;
box-sizing: border-box;
background: url(https://forumstatic.ru/files/001c/97/86/44771.jpg) no-repeat top center / 100%, rgba(217, 217, 217, 1);
border-radius: 5px;
justify-content: center;
align-items: flex-end;
}

:root[data-scheme="dark"] userlist {
background: url(https://forumstatic.ru/files/001c/97/86/44771.jpg) no-repeat top center / 100%, rgb(var(--canvas-tertiary));
}

userlist * {
box-sizing: border-box;
}

userlist *::-webkit-scrollbar {
width: 3px;
height: 2px;
}

userlist userlisttitle {
font-family: var(--font-cat-title);
font-weight: 300;
font-style: Italic;
font-size: 12px;
line-height: 137%;
display: block;
position: absolute;
color: rgba(255, 255, 255, 1);
padding: 2px 11px 4px;
top: 122px;
background: linear-gradient(270deg, #B39E83 0%, #4D4438 100%);
border-radius: 10px;
}

userlist>div {
width: 935px;
height: 355px;
background: rgb(var(--canvas-secondary));
margin-bottom: 29px;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
border-radius: 10px;
padding: 20px;
}

userlist>div>div {
width: 905px;
height: 324px;
display: grid;
grid-template-columns: repeat(4, max-content);
grid-auto-rows: max-content;
align-items: start;
gap: 12px;
overflow: auto;
}

userlist charcont {
width: 211px;
height: 100%;
border-radius: 5px;
border-width: 1px;
padding: 8px 9px;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
display: block;
}

userlist charcont app {
display: block;
font-family: var(--font-cat-title);
font-weight: 300;
font-size: 9px;
line-height: 137%;
padding-bottom: 6px;
}

userlist charcont a {
display: inline-block;
font-family: moisette;
font-weight: 400;
font-size: 13px;
line-height: 90%;
text-transform: lowercase;
font-style: italic;
margin-right: 2px;
vertical-align: middle;
padding-bottom: 6px;
color: rgb(var(--text-primary))!important;
}

userlist charcont occ {
display: block;
font-weight: 400;
font-size: 9px;
max-width: 200px;
line-height: 130%;
text-transform: lowercase;
padding-bottom: 6px;
}

userlist charcont loc {
border: 1px solid rgba(177, 183, 200, 1);
border-radius: 50px;
position: relative;
display: block;
height: 20px;
width: fit-content !important;
box-sizing: border-box;
padding: 6px 11px 6px 27px !important;
margin: 0 0 5px 0 !important;
font-family: var(--font-cat-title);
font-weight: 500;
font-size: 8px;
line-height: 90%;
text-transform: lowercase;
color: rgba(rgb(var(--soft-gray)), 1);
}

userlist charcont loc::before {
content: '';
width: 10px;
height: 10px;
top: 4px;
left: 11px;
position: absolute;
background: url(https://forumstatic.ru/files/001c/97/86/31399.png) no-repeat center / 100%;
}

</style>

<userlist>
<userlisttitle>общий список занятых внешностей, имен и фамилий/занятости </userlisttitle>
<div><div>