[html]
<style>
.main-wrapper {
    position: relative;
    width: 600px;
    margin: 40px auto;
}
/* Квадраты по бокам */
.side-box {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    background: #8c2020;
    margin-top: -30px;
    z-index: 0;
}
.left-box { left: -30px; }
.right-box { right: -30px; }

.res-container {
    position: relative;
    z-index: 1;
    background: #111;
    border: 1px solid #222;
    padding: 20px;
    color: #ccc;
    font-family: Tahoma, sans-serif;
}
.res-title { font-size: 24px; color: #8c2020; text-transform: lowercase; margin-bottom: 5px; }
.res-meta { font-size: 10px; text-transform: uppercase; margin-bottom: 15px; }
.res-rules { font-size: 10px; list-style: none; padding: 0; margin-bottom: 20px; color: #888; }
.res-flex { display: flex; gap: 20px; }
.res-col { flex: 1; background: #1a1a1a; padding: 10px; border-right: 2px solid #8c2020; }
.res-col-title { font-size: 10px; text-transform: uppercase; margin-bottom: 10px; color: #fff; text-align: center; }
.res-item { font-size: 10px; margin-bottom: 8px; text-align: center; }
.res-footer { text-align: center; margin-top: 20px; font-size: 10px; text-transform: uppercase; color: #444; }
</style>

<div class="main-wrapper">
    <div class="side-box left-box"></div>
    <div class="side-box right-box"></div>
   
    <div class="res-container">
        <div class="res-title">STRANGER THINGS: RESERVATIONS</div>
        <div class="res-meta">тест // 1990 // мистика</div>
        <div class="res-meta">ЕСЛИ ВСЕ С УМА СХОДИМ, ТО БУДЕМ СХОДИТЬ ВМЕСТЕ, АГА?</div>
       
        <ul class="res-rules">
            <li>• заявки придерживают заказчики</li>
            <li>• внешность придерживаем на 3 дня</li>
            <li>• возможность продлить бронь на 2 дня</li>
        </ul>

        <div class="res-flex">
            <div class="res-col">
                <div class="res-col-title">придержанные:</div>
                <div class="res-item"> стив - <a href="ссылка_на_профиль">амс</a><br></div>
                <div class="res-item"> майк - <a href="ссылка_на_профиль">амс</a><br></div>
                <div class="res-item"> макс - <a href="ссылка_на_профиль">амс</a><br></div>
            </div>
            <div class="res-col">
                <div class="res-col-title">выкупленные:</div>
                <div class="res-item">до 00.00 <br> name surname</div>
            </div>
        </div>

        <div class="res-footer">

        </div>
    </div>
</div>
[/html]

            [до 00.00] имя_персонажа_прототипа - <a href="ссылка_на_профиль">ник</a><br>