[hideprofile][html]

<style>

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

.lore-disp {
    --lore-bg: rgb(var(--canvas-secondary));
    --lore-block-bg: rgb(var(--canvas-primary));
    --lore-innerblock-bg: linear-gradient(45deg, rgb(var(--accent-secondary), .1), rgb(var(--light-accent), .2));
--lore-innerblock-color: rgb(var(--text-primary));
--lore-clip-path: polygon(0 0px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 0px) 100%, 10px 100%, 0 calc(100% - 10px));

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: var(--lore-block-bg, rgb(0,0,0));
    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://forumstatic.ru/files/001c/88/d4/61358.jpg' />
</div>
ВАЖНО! Во всех контейнерах действует просто перенос строк пробелом. Если переносов слишком много - то и в тексте промежутки. Нупонятно.
Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus eu mi rhoncus iaculis lacinia. Molestie litora scelerisque et phasellus lobortis venenatis nulla vestibulum. Magnis posuere duis parturient pellentesque adipiscing duis. Euismod turpis augue habitasse diam elementum. Vehicula sagittis est parturient morbi cras ad ac. Bibendum mattis venenatis aenean pharetra curabitur vestibulum odio elementum! Aliquet tempor pharetra amet est sapien maecenas malesuada urna. Odio potenti tortor vulputate dictum dictumst eros.
</div>

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

<div data-title='ВОТ ТУТ НАЗВАНИЕ БЛОКА'> Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus eu mi rhoncus iaculis lacinia. Molestie litora scelerisque et phasellus lobortis venenatis nulla vestibulum. Magnis posuere duis parturient pellentesque adipiscing duis. Euismod turpis augue habitasse diam elementum. Vehicula sagittis est parturient morbi cras ad ac. Bibendum mattis venenatis aenean pharetra curabitur vestibulum odio elementum! Aliquet tempor pharetra amet est sapien maecenas malesuada urna. Odio potenti tortor vulputate dictum dictumst eros.
<img src='https://i.pinimg.com/736x/75/d9/d6/75d9d64a8b1849719208a92e936a39a5.jpg' style='width: 50%'/>

Картинки уже определённой ширины обтекаются справа.
Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus eu mi rhoncus iaculis lacinia. Molestie litora scelerisque et phasellus lobortis venenatis nulla vestibulum. Magnis posuere duis parturient pellentesque adipiscing duis. Euismod turpis augue habitasse diam elementum. Vehicula sagittis est parturient morbi cras ad ac. Bibendum mattis venenatis aenean pharetra curabitur vestibulum odio elementum! Aliquet tempor pharetra amet est sapien maecenas malesuada urna. Odio potenti tortor vulputate dictum dictumst eros.
<!-------- покрашенные врезки ------------------->
<span> Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus eu mi rhoncus iaculis lacinia. Molestie litora scelerisque et phasellus lobortis venenatis nulla vestibulum. Magnis posuere duis parturient pellentesque adipiscing duis. Euismod turpis augue habitasse diam elementum. Vehicula sagittis est parturient morbi cras ad ac. Bibendum mattis venenatis aenean pharetra curabitur vestibulum odio elementum! Aliquet tempor pharetra amet est sapien maecenas malesuada urna. Odio potenti tortor vulputate dictum dictumst eros.
</span>
<img src='https://i.pinimg.com/1200x/14/9f/c5/149fc5ddd79169890497a8c623e5f615.jpg' />
</span>
</div>

<div data-title='ЗАГОЛОВОК'>
Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus eu mi rhoncus iaculis lacinia. Molestie litora scelerisque et phasellus lobortis venenatis nulla vestibulum. Magnis posuere duis parturient pellentesque adipiscing duis. Euismod turpis augue habitasse diam elementum. Vehicula sagittis est parturient morbi cras ad ac. Bibendum mattis venenatis aenean pharetra curabitur vestibulum odio elementum! Aliquet tempor pharetra amet est sapien maecenas malesuada urna. Odio potenti tortor vulputate dictum dictumst eros.
</div>

</div>

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

<div> <span> Работают отдельные BB-теги типа выделения жирным:
Lorem ipsum odor amet, consectetuer adipiscing elit. Rhoncus eu mi rhoncus iaculis lacinia. Molestie litora scelerisque et phasellus lobortis venenatis nulla vestibulum. Magnis posuere duis parturient pellentesque adipiscing duis. Euismod turpis augue habitasse diam elementum. Vehicula sagittis est parturient morbi cras ad ac. Bibendum mattis venenatis aenean pharetra curabitur vestibulum odio elementum! Aliquet tempor pharetra amet est sapien maecenas malesuada urna. Odio potenti tortor vulputate dictum dictumst eros. </span> </div>

<div>
<img src='https://i.pinimg.com/736x/19/7a/d7/197ad75dfdab6179c0141a9abb40a77c.jpg' />

</div>

</div>

</section>[/html]