guestroom {
    width: 1000px;
    height: 700px;
    display: block;
    position: relative;
    box-sizing: border-box;
    padding: 151px 50px 10px;
    margin: auto !important;
    background: url(https://forumstatic.ru/files/001c/6f/55/21397.jpg) no-repeat center top / contain, rgb(17 15 16);
    border-radius: 20px;
}

guestroom::before {
    content: '';
    background: url(https://forumstatic.ru/files/001c/6f/55/39405.png);
    width: 160px;
    height: 230px;
    position: absolute;
    top: -31px;
    z-index: 2;
    left: -43px;
    filter: contrast(0.8) grayscale(0.1);
}

guestroom::after {
    content: attr(data-title);
    width: 1000px;
    box-sizing: border-box;
    font-family: var(--font-cat-title);
    height: auto;
    position: absolute;
    top: 45px;
    right: 0px;
    z-index: 1;
    background: linear-gradient(270deg, #ffffffa6, transparent);
    font-size: 50px;
    text-align: end;
    padding: 0px 50px;

}

guestinfo {
    display: block;
    background: #fcfcfcbd;
    padding: 20px;
    border-left: 15px solid rgb(var(--accent));
    backdrop-filter: blur(5px);
    font-size: 14px;
    font-weight: 500;
}


reserved,
redeemed {
    display: inline-flex;
    position: relative;
    gap: 20px;
    width: 396px;
    height: 300px;
    margin: 35px 6px 10px !important;
    background: #fcfcfcbd;
    padding: 35px 20px 20px;
    box-sizing:border-box;
    border-radius: 20px;
    backdrop-filter: blur(5px);
}

reserved {justify-self: end;}
redeemed {justify-self: start;}

reserved div,
redeemed div {
width:100%;
height:100%;
overflow: auto;
background:white;
border-radius:8px;
}

guestlinks {
    display: flex;
    position: absolute;
    gap: 10px;
    width: 900px;
    justify-content: center;
}

guestlinks a {
background:#eeeded;
    border-left: 5px solid rgb(var(--accent));
    padding: 3px 10px;
    bottom: -7px;
}

reserved::before,
redeemed::before {
content: attr(data-title);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    padding: 3px 25px 2px;
    font-size: 17px;
    text-transform: uppercase;
    font-family: 'MYRIADPRO-BLACK';
}

guestdate {
    display: block;
    width: 100%;
    text-align: center;
    padding: 15px 0 2px;
    border-bottom: 1px dashed grey;
    font-family: 'MYRIADPRO-BLACK';
    font-size: 15px;
}

reserved div p,
redeemed div p {
border-radius:8px;
padding:3px 15px !important;
margin:0!important;
}

guestchars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

.copy-to-reply-toform {
    padding: 4px 15px !important;
    background: #d6d6d6;
    color: #000;
    border-radius: 20px;
    margin: 5px !important;
    border: none;
    font-family: 'MYRIADPRO-BLACK';
    text-transform: uppercase;
    transition: var(--anim-hover) !important;
}

.copy-to-reply-toform:first-of-type {justify-self: end}
.copy-to-reply-toform:last-of-type {justify-self: start}

.copy-to-reply-toform::hover {
background:rgb(var(--accent))!important;
}

<guestroom data-title='ГОСТЕВАЯ'>

<!------------- ЛЮБАЯ НУЖНАЯ ИНФА-------------->
<guestinfo>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et magna bibendum, ornare nunc vel, porttitor orci. Phasellus eu suscipit orci. Proin nec egestas enim. Ut a tellus finibus, hendrerit ligula vitae, accumsan sapien.
<guestlinks> <a href=''>шаблон анкеты</a> <a href=''>инфо о мире</a> <a href=''>занятые внешности</a> <a href=''>список персонажей</a> <a href=''>сюжет</a></guestlinks>
</guestinfo>

<guestchars>
<!------------- ПРИДЕРЖАННЫЕ -------------->
<reserved data-title='придержанные'><div>

<guestdate>до 13.03</guestdate> 
<p> Имя Персонажа - за <a href=''>Никнейм игрока</a> </p>
<p> Имя Персонажа - за Никнейм игрока </p>
<p> Имя Персонажа - за Никнейм игрока </p>
<p> Имя Персонажа - за Никнейм игрока </p>
<guestdate>до 13.03</guestdate> 
<p> Имя Персонажа - за Никнейм игрока </p>
<p> Имя Персонажа - за Никнейм игрока </p>
<p> Имя Персонажа - за Никнейм игрока </p>




</div></reserved>

<!------------- ВЫКУПЛЕННЫЕ-------------->
<redeemed data-title='выкупленные'><div>
<p> Имя Персонажа - за Никнейм игрока </p>

</div></redeemed>

<button  class="copy-to-reply-toform">
Придержать роль
<div class="hidden-copy-code" style="display: none;">
   <code> <p> Имя Персонажа - за <a href='https://ссылка_на_профиль'>Никнейм игрока</a> </p></code>
  </div></button >

<button  class="copy-to-reply-toform">
Придержать внешность
<div class="hidden-copy-code" style="display: none;">
  <code><p> Имя медиа-персоны - за <a href='https://ссылка_на_профиль'>Никнейм игрока</a> </p></code>
  </div></button >
</guestchars>

</guestroom>