[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/26/19/10/26191043f21ae5647d45741ac6c5ae51.jpg' />
</div>

</div>

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

<div data-title='ОБЩЕЕ ОПИСАНИЕ'> 2 ноября – день всех Влюбленных.

Праздник всех влюблённых считается международным днём, когда люди открыто признаются друг другу в любви, дарят трогательные подарки и искренне напоминают о своих самых тёплых чувствах. Это один из самых популярных дней для заключения брака: многие пары мечтают связать свои судьбы именно в эту волшебную дату. Нередко 2 ноября выбирают и для помолвки — момент, наполненный романтикой, запоминается на всю жизнь. Неудивительно, что в этот день цветочные магазины делают огромную выручку: букеты красных роз и изящные композиции становятся неотъемлемым символом праздника, воплощая страсть, нежность и верность.

</div>

<div data-title='ИСТОКИ ПРАЗДНИКА'>

По одной из легенд в давние времена жили юноша Децим и прекрасная Юлия, чья любовь была столь сильна, что смогла побороть саму смерть.

Одной ночью, очарованный красотой Юлии, Ахтор — сын бога смерти и хворых болезней, унёс девушку в своё сумрачное царство, где не светит солнце, а воздух полон шёпотов ушедших душ.

Децим, не в силах смириться с потерей, отважно отправился вслед за возлюбленной. Путь его был тяжёл: он миновал пещеры, полные теней прошлого, и реки, чьи воды несли забвение. Но любовь, горящая в его сердце, освещала дорогу.

Когда Децим достиг чертога Ахтора, тот встретил его холодным взглядом и сказал: «Никто не уходит из моих владений без платы. Хочешь забрать Юлию — оставь взамен свою жизнь».

Децим без колебаний согласился: «Забери мою жизнь, но отпусти её. Пусть она живёт и будет счастлива — в этом моё единственное желание». И пораженный чистотой чувств Децима, он произнёс: «Такую любовь нельзя уничтожить. Она достойна жизни».

Ахтор вернул Юлию Дециму и позволил им обоим вернуться в мир живых. В знак уважения к такой любви он даровал им неувядающий цветок,  — символ любви, победившей саму смерть.

С тех пор 2 ноября считается Днём всех влюблённых. В этот день пары клянутся хранить верность друг другу. День всех влюблённых в Дюссельфолде — это праздник, напоминающий, что истинная любовь сильнее даже самой смерти.
</div>

</div>

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

<div>
<img src="https://i.pinimg.com/736x/0e/55/3a/0e553adb062dcd980fb6d78decd47d42.jpg">

</div>

</div>

</section>[/html]