Шаблон гостевой

[html]<style>
.guest-wrapper {
background: var(--canvas-secondary);
width: 930px;
height: 640px;
border-radius: 10px;
padding: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
}

.hp-navlinks {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}

.hp-navlinks a {
border-radius: 50px;
background: var(--bg-navlinks);
color: var(--text-primary) !important;
font: var(--fw400) var(--fs10) var(--font-second-sa);
overflow: hidden;
padding: 3px 12px 4px !important;
transition: color var(--anim-hover), background var(--anim-hover)!important;
}

.hp-navlinks a:hover {
background: var(--canvas-tertiary);
color: var(--canvas-primary) !important;
box-shadow: inset 0 0 0 0 var(--accent);
}

.center-info {
display: grid;
grid-template-columns: 40% 60%;
gap: 20px;
}

.guest-left {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0 !important;
}

.guest-left p {
font: var(--fw400) var(--fs22) var(--font-main) !important;
padding: 2px 0;
}
.guest-left div {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}

.guest-left div a {
background: var(--bg-navlinks);
padding: 2px 12px;
border-radius: 20px;
font: var(--fw400) var(--fs11) var(--font-second-sa);
color: var(--canvas-tertiary) !important;
overflow: hidden;
}
.roles-wrapper div p {
font: var(--fw400) var(--fs12) var(--font-second-sa)!important;
line-height:1!important;
}

.guest-right {
font: var(--font-second);
color: var(--text-primary);
text-transform: lowercase;
padding-top: 9px;
width: 500px;
}

.guest-right ul {
padding: 3px 5px 3px 15px;
text-indent: 5px;
background: #7D6F6966;
border-radius: 4px;
list-style: '•';
margin-top: 8px;
}

.roles-wrapper {
display: flex;
gap: 10px;
width: 900px;
justify-content: center;
margin-top: 20px;
}

.roles-wrapper > div {
padding: 10px;
border-radius: 10px;
background: var(--canvas-primary);
height: 267px;
position: relative;
width: 100%;
display: flex;
flex-direction: column;
}

.roles-wrapper > div::before {
content: attr(data-title);
border-radius: 4px;
padding: 0 10px 3px;
background: var(--canvas-tertiary);
color: var(--gray-main);
font: var(--fw400) var(--fs11) var(--font-second-sa);
opacity: .6;
margin: 0 auto;
}

.roles-wrapper div > div {
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
height: 250px;
scrollbar-gutter: stable;
}

.roles-wrapper div > div span {
font: var(--fw400) var(--fs11) var(--font-second-sa);
color: var(--text-primary);
width: 102%;
text-align: center;
border-bottom: 1px dashed var(--canvas-tertiary);
margin: 20px 0 10px;
}

.roles-wrapper div > div a {
width: fit-content;
color: var(--text-primary) !important;
}

</style>

<section class='guest-wrapper'>
<div class='hp-navlinks'>
<a href="https://hpsleepless.rusff.me/viewtopic.php?id=39">внешности</a>
<a href="https://hpsleepless.rusff.me/viewtopic.php?id=24">фак</a>
<a href="https://hpsleepless.rusff.me/viewtopic.php?id=45">роли</a>
<a href="https://hpsleepless.rusff.me/viewtopic.php?id=17">акции</a>
<a href="https://hpsleepless.rusff.me/viewtopic.php?id=26">мир</a>
<a href="https://hpsleepless.rusff.me/viewtopic.php?id=8">сюжет</a>
</div>

<div class='guest-left'>
<p> amc</p>
<div><a href="#">админ</a><a href="#">админ</a><a href="#">админ</a><a href="#">админ</a><a href="#">админ</a><a href="#">админ</a><a href="#">админ</a></div>
</div>

<div class='guest-right'>
Мы представляем вам альтернативную версию событий после Битвы за Хогвартс, в которой погиб наш славный Гарри Поттер. <b>Время в игре: лето 2010 года.</b>
<ul>
<li>Роли и внешности с профиля придерживаются на 3 дня, Продлить бронь можно 1 раз на 5 дней</li>
<li>Придержать для друзей, «на подумать» и с гостя - 1 день</li>
</ul>
</div>

</section>

<div data-title='внешности'><div>

<a href='#'>emily alyn lind — astrid flint</a>
<p>emily alyn lind — astrid flint</p>
<p>emily alyn lind — astrid flint</p>
<p>emily alyn lind — astrid flint</p>
<a href='#'>emily alyn lind — astrid flint</a>