[hideprofile][html]

<style>

/* ОФОРМЛЕНИЕ ЛОРА*/

.lore-disp {
    --lore-bg: rgb(239 237 235);
    --lore-block-bg: rgb(218 218 217);
    --lore-innerblock-bg: #e9e5e5;

display: grid;
position: relative;
width: 100%;
height: auto;
min-height: 500px;
grid-template-columns: 1fr 350px;
gap: 20px;
background: var(--lore-bg);
box-sizing: border-box;
padding: 20px;
border-radius: 20px;
}

.second .lore-disp {
    --lore-innerblock-bg: linear-gradient(45deg, rgb(var(--accent-secondary), .1), rgba(105, 19, 19, .2));

}

.lore-disp * {
box-sizing: border-box;
}

.lore-disp:not(:has(.lore-right)) .lore-left {
grid-column: span 2;
border-radius: 20px;

}

.lore-disp .lore-right,
.lore-disp .lore-left {
position: relative;
display: flex;
flex-direction: column;
gap: 15px;
box-sizing: border-box;
height: 100%;
border-radius: 20px;

}

.lore-left > div {
background: rgb(241 241 241);
    padding: 10px;
flex-shrink: 0;
position: relative;
border-radius: 10px;
    white-space: pre-line;
}

.lore-left > div:last-of-type {
    flex-grow: 1;
}

.lore-right > div {
background:  var(--lore-block-bg);
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 10px;
    white-space: pre-line;
}

.lore-right > div > span {
    padding: 13px 13px;
flex-shrink: 0;
display: block;
background: var(--lore-innerblock-bg);
    color: var(--lore-innerblock-color);
    border-radius: 5px;
    white-space: pre-line;
}

.lore-right > div:last-of-type {
height: 100%;
}

.lore-header span,
.lore-left > div > span {
padding: 10px 20px;
    background: var(--lore-innerblock-bg);
    color: var(--lore-innerblock-color);
    display: block;
    margin-top: 10px;
border-radius: 5px;
    white-space: pre-line;
}

.lore-left > div::before {
content: attr(data-title);
width: fit-content;
position: relative;
display: block;
padding: 0 15px;
font: 400 18px 'Alegreya';
left: 25px;
margin-bottom: 10px;
z-index: 1;
background:  var(--lore-block-bg);
}

.lore-left > div::after {
content: '';
    width: calc(100% - 20px);
height: 1px;
position: absolute;
display: block;
background: rgb(var(--text-primary));
    top: 22px;
    z-index: 0;
}

.lore-title {
    width: 100%;
    height: 130px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lore-title::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, #272B30 2%, transparent 60%), radial-gradient(ellipse at top left, #3a6e92 0%, rgba(0, 0, 0, 0) 50%), transparent;
z-index: 2;
mix-blend-mode: difference;
}

.lore-title span {
    position: relative;
    z-index: 2;
    display: flex;
    font: 400 26px 'Alegreya';
    color: white;
    padding: 10px 50px;
    backdrop-filter: blur(5px);
    background: #00000050;
    text-align: center;
    width: fit-content;
    text-transform: uppercase;
}

.lore-title img {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
object-fit: cover;
z-index: 1;
filter: grayscale(.3) contrast(.8);
    border-radius: 5px;
}

.lore-header {
grid-column: span 2;
background:  var(--lore-block-bg);
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
    border-radius: 10px;
}
.lore-disp img {
    border-radius: 5px;
}

.lore-left img {
max-width: 100%;
margin: 10px 10px 10px 0px;
    float: left;
}

/* КОНЕЦ ОФОРМЛЕНИЕ ЛОРА */

</style>

<section class='lore-disp'>

<div class='lore-header'>
<div class='lore-title'>
<span> Центральные фигуры сюжета</span>
<!------ картинка-фон заглоловка -------------------------------------------------------------->
<img src='https://i.pinimg.com/736x/a2/fb/7d/a2fb7db24c2ee5084e3053694a0331e5.jpg' />
</div>

</div>

<!------------ ПЕРВЫЙ БЛОК (широкий слева) ------------------------------------------------------------>
<div class='lore-left'>

<div data-title='ОБЩЕЕ ОПИСАНИЕ'> В этой теме представлены центральные фигуры сюжета, персонажи, от которых зависит развитие истории. Эти герои влияют на ключевые события, и их решения напрямую отражаются на исходе истории. Среди них есть персонажи разных социальных статусов и ролей, но все они так или иначе задействованы в основном сюжете.

Для многих из указанных персонажей доступна смена внешности — подробности можно уточнить в <a href="https://lepidus.ru/viewtopic.php?id=6233&p=6#p286899">гостевой</a>. У некоторых героев также можно корректировать возраст, отдельные детали биографии и происхождение, что позволит полностью адаптировать персонажа под предпочтения.
</div>

</div>

<!------------ ВТОРОЙ БЛОК (узкий справа) ------------------------------------------------------------>
<div class='lore-right'>

<div>
Отдельные акции можно забрать по пробному посту, написанному от лица персонажа (уточняйте в гостевой подробности).

</div>

</div>

</section>[/html]