сюжет делится на две вселенные:
> канон по манге: события происходят до поимки однохвостого. никакого ограничения в выборе персонажей.
> мафия ау: живы все, полет фантазий не ограничен. создавайте группировки, придумывайте свои удивительные истории, плетите интриги, стройте заговоры. место действия: современная япония (токио//осака). способности те же что и в каноне, приправленные огнестрелом, крутыми тачками, убийствами и наркотой.

[html]<!-- мироописание от духа -->
<script type="text/javascript" src="https://forumstatic.ru/files/001b/36/d6/94544.js"></script>
<div class="world-container">

<!-- альтернатива  -->

  <div class="world-block">
  <div class="header">
    <span></span>
  </div>
    <img src="https://i.postimg.cc/wTqQ6VJZ/044.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">закрыть</div>
  <div>

      <h5>ПРЕДЫСТОРИЯ</h5>

<p>ахуенный сюжет</p>

<h5> НАШИ ДНИ</h5>

<p>продолжение ахуенного сюжета<p>

<h5>РАЗЫСКИВАЮТСЯ:</h5>

<em>☛ <a href="ссылка">кто;</a> от кого</em>
     </div></div>
<!-- конец альтернативы  -->

<!-- начало якудзы  -->
  <div class="world-block">
    <div class="header">
    <span></span>
    </div>
    <img src="https://i.postimg.cc/PJ3pfmnn/23423.png"></div>
  <div class="info2 closed">
         <div class="close-btn">закрыть</div>
    <div>

<h5>АКАЦУКИ</h5>

<p><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>#ship9 {
--sh1: 120px;   /* ширина и минимальная высота картинки */
--sh2: #6d888e;   /* цвет описания персонажа */
}
#ship9 {max-width:700px; display:block; position:relative; overflow:hidden; width:100%; height:auto; box-sizing: border-box;}
#ship9 * {box-sizing:border-box;}
.shipp {display:grid; grid-template-columns: calc(var(--sh1) + 20px) auto auto; grid-template-rows: auto auto; width: 100%; margin-bottom: 20px;}
.shipp:last-child {margin-bottom: 0px;}
.kartin {grid-row-start: 1; grid-row-end:3; grid-column-start:1; grid-column-end:2; display:block; width: var(--sh1); min-height: var(--sh1); height:auto; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; grid-row-start: 1; grid-row-end:2;}
/*** ИМЯ ПЕРСОНАЖА ***/
.namep {grid-column-start:2; grid-column-end:3; place-self: center left; font-family: 'Oswald', Tahoma, sans-serif; font-size:22px;}
.namp {grid-column-start:3; grid-column-end:4; place-self: center right; color: var(--sh2); font-style: italic;}
.shipp > p {grid-row-start: 2; grid-row-end:3; grid-column-start:2; grid-column-end:4; align-self: start; padding:0 8px 0 0 !important; margin:10px auto 6px 0px !important; overflow:auto; line-height:130% !important; text-align: justify; font-family: Tahoma, Arial, sans-serif; max-height:70px;}
.shipp *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.shipp *::-webkit-scrollbar-thumb {background: var(--sh2);} /*shipovnik*/
.shipp *::-webkit-scrollbar-corner {background: transparent;}
</style>
<div id="ship9"><!-- START -->

   <!-- кисаме_01 -->
<div class="shipp"><div class="kartin" style="background-image:url(https://i.postimg.cc/ZYBTcXXG/18.png)"></div>
   <div class="namep"><a href="https://dissues.rusff.me/profile.php?id=44">хошигаке кисаме</a></div>
   <div class="namp">32 // Акацуки // механик, водитель</div>
   <p>
<b>биография:</b><br>
• с детства интересовался тачками, лазал под капотом с десяти лет;<br>
• часто наводил кипиш с местной мелкой братвой;<br>
• в пятнадцать подрабатывал на отцовской мастерской;<br>
• в семнадцать собрал свою первую тачку;<br>
• начал водиться в рядах уличных гонщиков, устраивать заезды за деньги;<br>
• не прекращал тусоваться с местной братвой, был замешан в незаконной перепродаже угнанных машин;<br>
• в связи с частым мельканием рожей на улицах, стал как свой, заимел авторитет у местных любителей погонять;<br>
• сформировал свой маленький клуб по интересам, занимался апгрейдом машин;<br>
• встрял в долги проиграв в заезде девчонке;<br>
• был завербован в организацию в счет погашения долга;<br>
<b>факты:</b><br>
• обладатель множества штрафов за участие в несанкционированных гонках в городе;<br>
• в организации помимо того, что следит за местными тачками, разводит акул на продажу;<br>
• частенько пропадает на улицах, залезая в очередные состязания, за что часто получает по колпаку;<br>
• бросал курить раз десять, но из раза в раз срывался;<br>
• любимая тачка shivrolet impala 1963;<br><br>

<b>способности и оружие:</b><br>
• манипуляции водой и возможность ее создание;<br>
• призывает акул (только при битве на воде);<br>
• большой запас чакры, даже по меркам организации;<br>
• способен поглощать чужую чакру;<br>
• предпочитает ближний бой;<br>
<b>самехада:</b> оружие, которое используется крайне редко; представляет из себя живой меч, защищенный твердыми пластинами, оснащенный зубастой пастью; может поглощать чакру как противника, так и хозяина; может слиться с телом хозяина, регенерируя его тело и делая больше похожим на акулу; обладает собственным сознанием;<br>
   </p></div>

<!-- конан_02 -->
<div class="shipp"><div class="kartin" style="background-image:url(https://i.imgur.com/NZVwBAx.png)"></div>
   <div class="namep"><a href="https://dissues.rusff.me/profile.php?id=92">конан</a></div>
   <div class="namp">35 лет // Акацуки // красивая и жестокая mommy</div>
   <p>
<b>биография:</b><br>
• сирота;<br>
• дралась с котом за кусок хлеба, когда в приюте дела были совсем плохи;<br>
• в своё время попала под покровительство влиятельного дяди, который начал воспитывать её как собственного ребёнка;<br>
• когда стала старше, то начала напрашиваться на «работу» дяди, а тот и не мог отказать. так узнала о разнообразии методов получения информации от людей;<br>
• получила достойное образование;<br>
• после убийства (но она верит, что это всё подставная смерть), идейно продолжила его дело, только людей пришлось искать с нуля;<br>
<br><br>

<b>способности и оружие:</b><br>
• управление бумагой: не только магическое выплёвывание бумаги принтером или магическое подтирание задницы; может поднимать, опускать, разрывать, жмякать любую бумагу в радиусе 20м без прямого контакта;<br>
• укреплённая бумага – генетически модифицированный вид бумаги: она крепче и острее обычного листа, покрытая специальными маслами, что защищают её от влаги. зачастую используется в качестве оружия в виде сюрикенов и прочего метательного. если вы порезали пальчик бумажкой, то знайте – это не случайно;
• ангельские крылья – конан собирает листы в кучу, формируя подобие больших крыльев. благодаря им может левитировать над землёй и перемещаться на небольшие расстояния;<br>
• влад а4 – конан в буквальном смысле может распадаться на кучу листов бумаги, лететь в определённом направлении, а потом собираться обратно;<br>
• влад бумага – поддельный бумажный клон, который распадается от одного удара, но может служить неплохой приманкой;<br>
<br>
   </p></div>
   <!-- конец конан -->

<!-- итачи_03 -->
<div class="shipp"><div class="kartin" style="background-image:url(https://forumupload.ru/uploads/001b/f3/64/32/546229.png)"></div>
   <div class="namep"><a href="https://dissues.rusff.me/profile.php?id=32">учиха итачи</a></div>
   <div class="namp">21 // Акацуки // <s>слепошара</s> информатор, юрист ( студент )</div>
   <p>
<b>биография:</b><br>
• родителей не убивал, но хотелось ( нет );<br>
• в детстве хотел пойти в правоохранительные органы или стать медиком, но что-то пошло не так, а время когда упустил;<br>
• никогда не был гением, хотя все вокруг упорно пытались это доказать ( то, что добивался своего без участия семейных связей, не аргумент );<br>
• ебется со здоровьем, но никому об этом не рассказывает, потому что потому ( уже мало что видит, но линзы в помощь );<br>
• пошел в организацию, когда потерял связь с братом, а кто еще выручит если не он сам - хотя бы узнает что произошло и придумает что делать;<br>
• вероятно проходит практику в полицейском участке, чтобы иметь хоть какой-то информационный доступ к происходящему на стороне;<br>
<br><br>

<b>способности и оружие:</b><br>
• иллюзии: уровень для простачков и уровень для продвинутых ( во втором случае зрительные нервы молят о пощаде и ненавидят владельца );<br>
• техники огня как смысл жизни: наиболее часто используемая стихия, хотя благодаря геному может и в остальные ( сильнейшее проявление, аматерасу - черный огонь, который горит семь дней и семь ночей. площадь взаимодействия небольшая, затрачивает много сил, откат вплоть до больничной койки );<br>
• скорость реакции и навыки ближнего боя;<br>
• призыв: вороны, преимущественно, целыми стаями ( очень помогают во время слежки, могут быть достаточно автономны и выполнять несколько задач одновременно. радиус - 25метров. )<br>
• сусаноо - призыв некой сущности, с мечом тотсука, изгоняющим зло ( один раз призвать - один раз сдохнуть ) <br>
<br>
   </p></div>
   <!-- конец итачи -->

<!-- сасори_04 -->
<div class="shipp"><div class="kartin" style="background-image:url(https://forumupload.ru/uploads/001b/f3/64/25/518084.jpg)"></div>
   <div class="namep"><a href="https://dissues.rusff.me/profile.php?id=25">сасори</a></div>
   <div class="namp">35 // Акацуки // хирург</div>
   <p>
<b>биография:</b><br>
• рос и воспитывался бабушкой с малых лет, так как родители решили, что проще уйти в закат ( ну, или просто без вести пропали );<br>
• в семейном бизнесе было два направления: марионетки и фармацевтика, под руководством старухи чиё овладел всем, но резать людей оказалось увлекательнее;<br>
• истинно влюблен в искусство боттичелли и караваджо;<br>
• сначала был медиком широкого профиля, после пошел в хирургию как в основное направление ( в свободное время пытается воссоздать человеческую марионетку, вроде даже получается, но материал не всегда подходит ); <br>
• в организацию позвали, пообещав за это не распространяться о вне рабочей деятельности;<br>
• своего рода аптечный пункт и срочная медицинская медицинская помощь для членов организации, при этом работать в больнице не перестал;
<br><br>

<b>способности и оружие:</b><br>
• очень много ядов и токсинов;<br>
• очень много марионеток, некоторые из них человеческие ( самые сильные с особенностями прошлых владельцев тел ) и с особыми видами вооружения;<br>
• немного разбирается в инженерии, чтобы создавать оружие;<br>
• обширные познания в медицине и сопутствующих науках;<br>
• может не только в дальний бой, но и в ближний ( пусть не настолько успешно );<br>
<br>
   </p></div>
   <!-- конец сасори -->

<!-- хидан_05 -->
<div class="shipp"><div class="kartin" style="background-image:url(https://i.postimg.cc/CLSkvzSM/49.png)"></div>
   <div class="namep"><a href="https://dissues.rusff.me/profile.php?id=36">хидан</a></div>
   <div class="namp">25 // акацуки // преступник</div>
   <p>
<b>биография:</b><br>
• родился и вырос в самом бедном районе токио — санья, воспитывался отцом, мать умерла при родах;<br>
• с пяти лет подрабатывал бегунком, снабжая район наркотиками, после того как отца порешили за неуплату крупного долга, сбежал из дома;<br>
• скитаясь по району красных фонарей был замечен главой культа Джашина и принят на служение в паству;<br>
• в 2017м году в ходе конфликта местной группировки и культистов - большая часть адептов культа оказалась убита, хидан так же погиб в этот день. ему посчастливилось воскреснуть незадолго до того, как прибыла полиция. оценив масштабы произошедшего, он забрал из тайника деньги культа и поклявшись отомстить, бежал.<br>
• чуть позже был завербован в акацуки под предлогом защиты и покровительства.<br>
• на деньги культа приобрел разъебанный после пожара клуб в самом центре кабуки: отремонтировал и переоткрыл, став центром наркоторговли и разврата. вип-зона клуба по сей день используется как переговорная для членов акацуки.
<br><br>

<b>способности и оружие:</b><br>
• бессмертие, в него входит: сверхчеловеческая сила и выносливость; возможность прожить без воды и еды очень долгое время; высокий болевой порог, шок от которого убил бы простого человека; уникальная способность пережить травмы и кровопотерю несовместимые с жизнью; ускоренная регенерация, которая не позволяет телу стареть, а отрубленные конечности отрастают в течении нескольких дней;<br>
• вудуизм — своеобразный ритуал. кровь жертвы, которую испробует хидан, устанавливает между ними прочную связь на непродолжительный участок времени. все повреждения наносимые на тело хидана, автоматически переносятся на жертву. вудуизм работает только на одну цель за раз.<br>
<br>
   </p></div>
   <!-- конец хидана -->

<!-- END --></div></p>
     </div></div>
<!-- конец якудзы  -->

<!-- начало банды  -->
  <div class="world-block">
  <div class="header">
    <span></span>
  </div>
    <img src="https://i.postimg.cc/XYJmQPKk/354.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">закрыть</div>
  <div>

      <h5>ЗМЕИ</h5>

<p>текст</p>

      <h5>УЧИХА</h5>

<p><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>#ship9 {
--sh1: 120px;   /* ширина и минимальная высота картинки */
--sh2: #6d888e;   /* цвет описания персонажа */
}
#ship9 {max-width:700px; display:block; position:relative; overflow:hidden; width:100%; height:auto; box-sizing: border-box;}
#ship9 * {box-sizing:border-box;}
.shipp {display:grid; grid-template-columns: calc(var(--sh1) + 20px) auto auto; grid-template-rows: auto auto; width: 100%; margin-bottom: 20px;}
.shipp:last-child {margin-bottom: 0px;}
.kartin {grid-row-start: 1; grid-row-end:3; grid-column-start:1; grid-column-end:2; display:block; width: var(--sh1); min-height: var(--sh1); height:auto; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; grid-row-start: 1; grid-row-end:2;}
/*** ИМЯ ПЕРСОНАЖА ***/
.namep {grid-column-start:2; grid-column-end:3; place-self: center left; font-family: 'Oswald', Tahoma, sans-serif; font-size:22px;}
.namp {grid-column-start:3; grid-column-end:4; place-self: center right; color: var(--sh2); font-style: italic;}
.shipp > p {grid-row-start: 2; grid-row-end:3; grid-column-start:2; grid-column-end:4; align-self: start; padding:0 8px 0 0 !important; margin:10px auto 6px 0px !important; overflow:auto; line-height:130% !important; text-align: justify; font-family: Tahoma, Arial, sans-serif; max-height:70px;}
.shipp *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.shipp *::-webkit-scrollbar-thumb {background: var(--sh2);} /*shipovnik*/
.shipp *::-webkit-scrollbar-corner {background: transparent;}
</style>
<div id="ship9"><!-- START -->

<!-- END --></div>

<h5>КЛАН СЕНДЖУ</h5>

<p><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>#ship9 {
--sh1: 120px;   /* ширина и минимальная высота картинки */
--sh2: #6d888e;   /* цвет описания персонажа */
}
#ship9 {max-width:700px; display:block; position:relative; overflow:hidden; width:100%; height:auto; box-sizing: border-box;}
#ship9 * {box-sizing:border-box;}
.shipp {display:grid; grid-template-columns: calc(var(--sh1) + 20px) auto auto; grid-template-rows: auto auto; width: 100%; margin-bottom: 20px;}
.shipp:last-child {margin-bottom: 0px;}
.kartin {grid-row-start: 1; grid-row-end:3; grid-column-start:1; grid-column-end:2; display:block; width: var(--sh1); min-height: var(--sh1); height:auto; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; grid-row-start: 1; grid-row-end:2;}
/*** ИМЯ ПЕРСОНАЖА ***/
.namep {grid-column-start:2; grid-column-end:3; place-self: center left; font-family: 'Oswald', Tahoma, sans-serif; font-size:22px;}
.namp {grid-column-start:3; grid-column-end:4; place-self: center right; color: var(--sh2); font-style: italic;}
.shipp > p {grid-row-start: 2; grid-row-end:3; grid-column-start:2; grid-column-end:4; align-self: start; padding:0 8px 0 0 !important; margin:10px auto 6px 0px !important; overflow:auto; line-height:130% !important; text-align: justify; font-family: Tahoma, Arial, sans-serif; max-height:70px;}
.shipp *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.shipp *::-webkit-scrollbar-thumb {background: var(--sh2);} /*shipovnik*/
.shipp *::-webkit-scrollbar-corner {background: transparent;}
</style>
<div id="ship9"><!-- START -->

<!-- END --></div>

<h5>КЛАН ХЬЮГА</h5>

<p><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>#ship9 {
--sh1: 120px;   /* ширина и минимальная высота картинки */
--sh2: #6d888e;   /* цвет описания персонажа */
}
#ship9 {max-width:700px; display:block; position:relative; overflow:hidden; width:100%; height:auto; box-sizing: border-box;}
#ship9 * {box-sizing:border-box;}
.shipp {display:grid; grid-template-columns: calc(var(--sh1) + 20px) auto auto; grid-template-rows: auto auto; width: 100%; margin-bottom: 20px;}
.shipp:last-child {margin-bottom: 0px;}
.kartin {grid-row-start: 1; grid-row-end:3; grid-column-start:1; grid-column-end:2; display:block; width: var(--sh1); min-height: var(--sh1); height:auto; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; grid-row-start: 1; grid-row-end:2;}
/*** ИМЯ ПЕРСОНАЖА ***/
.namep {grid-column-start:2; grid-column-end:3; place-self: center left; font-family: 'Oswald', Tahoma, sans-serif; font-size:22px;}
.namp {grid-column-start:3; grid-column-end:4; place-self: center right; color: var(--sh2); font-style: italic;}
.shipp > p {grid-row-start: 2; grid-row-end:3; grid-column-start:2; grid-column-end:4; align-self: start; padding:0 8px 0 0 !important; margin:10px auto 6px 0px !important; overflow:auto; line-height:130% !important; text-align: justify; font-family: Tahoma, Arial, sans-serif; max-height:70px;}
.shipp *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.shipp *::-webkit-scrollbar-thumb {background: var(--sh2);} /*shipovnik*/
.shipp *::-webkit-scrollbar-corner {background: transparent;}
</style>
<div id="ship9"><!-- START -->

<!-- END --></div>

     </div></div>
<!-- конец банды  -->

<!-- начало канон  -->
<div class="world-block">
        <div class="header">
    <span></span>
    </div>
    <img src="https://i.postimg.cc/CLnLfyjq/033.png"></div>
  <div class="info3 closed">
         <div class="close-btn">закрыть</div>
    <div>
<hr>
<h5>СЮЖЕТ</h5>
<hr>
<p>Сюжет канона в таймлайне до смерти Сасори.</p>

<hr>
<h5>ХРОНОЛОГИЯ СОБЫТИЙ</h5>
<hr>

      <em>☛ <a href="ссылка">название;</a> кто с кем</em>
<hr>
     </div></div>
<!-- конец канона  -->

<!-- начало горожане  -->
  <div class="world-block">
        <div class="header">
    <span></span>
    </div>
    <img src="https://i.postimg.cc/brcLHD6n/pic-Fan.png"></div>
  <div class="info4 closed">
         <div class="close-btn">закрыть</div>
    <div>

<h5>ГОРОЖАНЕ</h5>

<p><link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>#ship9 {
--sh1: 150px;   /* ширина и минимальная высота картинки */
--sh2: #6d888e;   /* цвет описания персонажа */
}
#ship9 {max-width:700px; display:block; position:relative; overflow:hidden; width:100%; height:auto; box-sizing:border-box;}
#ship9 * {box-sizing:border-box;}
.shipp {display:grid; grid-template-columns: calc(var(--sh1) + 20px) auto auto; grid-template-rows: auto auto; width: 100%; margin-bottom: 20px;}
.shipp:last-child {margin-bottom: 0px;}
.kartin {grid-row-start: 1; grid-row-end:3; grid-column-start:1; grid-column-end:2; display:block; width: var(--sh1); min-height: var(--sh1); height:190px; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; grid-row-start: 1; grid-row-end:2;}
/*** ИМЯ ПЕРСОНАЖА ***/
.namep {grid-column-start:2; grid-column-end:3; place-self: center left; font-family: 'Oswald', Tahoma, sans-serif; font-size:22px;}
.namp {grid-column-start:3; grid-column-end:4; place-self: center right; color: var(--sh2); font-style: italic;}
.shipp > p {grid-row-start: 2; grid-row-end:3; grid-column-start:2; grid-column-end:4; align-self: start; padding:0 8px 0 0 !important; margin:10px auto 6px 0px !important; overflow:auto; line-height:130% !important; text-align: justify; font-family: Tahoma, Arial, sans-serif; max-height:150px;}
.shipp *::-webkit-scrollbar {width:3px; height:3px; background: rgba(0, 0, 0, 0.05);}
.shipp *::-webkit-scrollbar-thumb {background: var(--sh2);} /*shipovnik*/
</style>
<div id="ship9"><!-- START -->

<!-— имя персонажа -->
<div class="shipp"><div class="kartin" style="background-image:url(https://i.postimg.cc/d1cZHP1d/1.png)"></div>
   <div class="namep"><a href="https://dissues.rusff.me/profile.php?id=86">харуно сакура</a></div>
   <div class="namp">19 // студентка медицинского факультета</div>
   <p>
<b>биография:</b><br>
• сакура родилась в семье адвокатов;<br>
• подвергалась буллингу со стороны сверстников за внешность, характер, положение ее семьи в обществе;<br>
• росла в строгости и постоянном давлении в связи с чем заработала себе синдром отличника и перфекционизм;<br>
• когда встал вопрос о выборе учебного заведения и специализации, сакура пошла наперекор семье и поступила на медицинский факультет, за что была лишена средств;<br>
• позже скооперировавшись с подружкой съезжает от родителей, снимая двухкомнатную квартиру;<br>
• проходит практику в местной токийской больнице, в свободное время берет полноценные смены подрабатывая ассистентом хирурга;<br>
<br><br>

<b>способности и оружие:</b><br>
• в детстве по настоянию отца профессионально занималась рукопашным боем: знает основы и некоторые приемы, хорошая в уклонении;<br>
• шосен - способность лечить раны, концентрируя свою чакру в ладонях;<br>
• сайкан чушутсу - сакура может извлечь из тела человека яд или какое-либо другое вещество, если это невозможно сделать обычными методами или же подобрать антидот;<br>
• бьякуго но ин - повышенная регенерация;<br>
<br>
   </p></div>
   <!-— конец имя персонажа -->
<!-- END --></div></p>
     </div></div>

<!-- конец горожане  -->

<!-- начало хронология  -->
  <div class="world-block">
  <div class="header">
    <span></span>
  </div>
    <img src="https://i.postimg.cc/527VPnqV/022.png">
  </div>
  <div class="info1 closed">
  <div class="close-btn">закрыть</div>
  <div>
<hr>
      <h5>ФЛЕШБЭК</h5>
<hr>
<p>текст<p>
      <em>☛ <a href="ссылка"> название; </a> кто с кем</em>

<hr>
<h5>НАШИ ДНИ</h5>
<hr>
<p>текст<p>
      <em>☛<a href="ссылка"> название;</a> кто с кем</em>
     </div></div>
<!-- конец хронология  -->
</div>

<style>
/* css мироописания от духа */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Rubik:wght@500;600;800;900&display=swap');

.world-container {
  column-gap: 4px;  /* отступ между колонками */
  margin: 0px auto 20px auto;
  column-count: 2; /* количество столбцов*/
  width: 600px;  /* ширина контейнера с блоками*/
  position: relative;
  text-align: center;
}

.world-block {
  margin: 2px 0px;  /* нижний и верхний отступ между блоками*/
  padding: 0px;
  display: inline-block;
  line-height: 0;
  width: 295px;  /* ширина блоков */
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all .9s cubic-bezier(.63,.34,.09,.96) 0s;
}

.world-block .header {
  position: absolute;
background: linear-gradient(to bottom, rgba(41,84,11,0) 0%, rgba(0,0,0,0.14) 18%,rgba(0,0,0,0.14) 39%,rgba(0,0,0,0.14) 74%,rgba(0,0,0,0.14) 100%);
  color: #fefefe;  /* цвет шрифта заголовков на картинках */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content:  flex-end;
  align-items: center;
  font: 800 22px/150% 'Rubik';  /* шрифт заголовков на картинках */
  text-transform: uppercase;
  z-index: 1;
}

.world-block:hover {
  filter: grayscale(10%)
}

.world-block img {
    transition: all .3s cubic-bezier(.63,.34,.09,.96) 0s;
}

.world-block:hover img {
  transform: scale(1.1);
  filter: blur(1px)
}

.world-block .header span {
  display: block;
  margin-bottom: 20px;
  text-align: center
}

.closed{
  background: #fefefe;  /* фон выпадающего описания */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  padding: 25px;
  text-align: center;
  display: none;
  box-shadow: 0 0 0 9px #d1d1e2 inset, 0 0 0 10px rgba(0,0,0,.1) inset  /* обводка */
}

.closed > div:not(.close-btn) {
  overflow-y: auto;
  height: calc(100% - 35px);
  padding-right: 5px;
}

.close-btn {
  background: rgba(0,0,0,.04);  /* фон кнопки закрытия */
  border: 1px solid rgba(0,0,0,.06);  /* бордер кнопки закрытия */
  height: 15px;
  text-transform: uppercase;
  font: 300 10px/15px merriweather;  /* шрифт кнопки закрытия*/
  text-align: center;
  margin-bottom: 20px;
  cursor: pointer;
  letter-spacing: 2px
}

.closed h5 {
  font: 700 20px merriweather;  /* шрифт заголовков описания */
  margin: 20px 0px 10px;
  position: ;
  padding-left: px;
}

.closed h5:before {
  content: "";
  height: 2px;
  width: 30px;
  background: rgba(0,0,0,.7);
  position: ;
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}

.closed h5:first-child {
  margin-top: 0
}

.closed em {
  font: 300 11px Georgia;  /* шрифт мини цитаток */
  display: block;
  padding-right: 10px;
  text-align: left;
  margin: 10px 0;
}
</style>

[/html]