[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="http://25.media.tumblr.com/2b3e462d0553f5c8dc8c64bb70d149cd/tumblr_mh9h8tPqLX1rs9gsro8_250.gif">
  </div>
  <div class="info1 closed">
  <div class="close-btn">— свернуть блок —</div>
  <div>
      <h5>Оборотни</h5>
      <em>На моих зубах кровь. И в моей душе, наверное.</em>
<p>Оборотень - вид, отделившийся от homo sapiens, а может и еще раньше, а может и не имевший предком обезьяну. Наука до сих это до конца не изучила, хотя исследования оборотней финансируются чуть меньше, чем уничтожение этих самых оборотней. Были названы таким образом, поскольку имели схожих персонажей в мифологии и историях разных народов мира. Не факт, что описывались именно существующие оборотни, но есть ряд признаков, который давно знаком миру.</p>

<p>Оборотни могут превращаться в волков. Только в волков. Зато в зависимости от происхождения оборотень может быть мелким аравийским волком, а может - крупным арктическим. К слову, те, кого мы называем собаками, могут оказаться оборотнями, все-таки это такой же подвиг волка, как и указанные выше. Только вот какая вещь - собаки по большей части выводились людьми, некоторые породы, как вы знает, так вообще не выживут в дикой природе, и вот как можно встретить оборотня-овчарку? В общем-то, если его предки долго жили среди людей, забыв об обращении, но не смешивая свою кровь с человеческой, они могут мимикрировать под выводимые в этих местах породы. В основном это достаточно старые породы, потому что в современной селекции все сложнее, а выводить новых оборотней никому не надо. К слову, во время беременности женщине крайне нежелательно перекидываться и оборачиваться, потому что с плодом могут произойти непоправимые изменения. Либо все время в обличье волчицы, либо - человека.</p>

<p>Оборотень + Оборотень = Оборотень</p>
<p>Оборотень + Человек = Человек с сильной стороной (полукровка)</p>
<p>Полукровка + Полукровка = Полукровка</p>
<p>Полукровка + Оборотень = Оборотень</p>
<p>Полукровка + Человек = Человек</p>

<p>Ранее оборотни предпочитали селиться там же, где и те волки, на которых они походили, но с течением времени расселились по всему земному шару, смешавшись с людьми и с себеподобными. Надо учитывать, что полная луна никак не сказывается на оборотнях, разве что они использовали ее для составления собственных календарей, но кто в древности не занимался таким ремеслом? В общем, волком они могут стать по своему желанию.</p>

<p>На этом сходство с легендами заканчивается. Оборотней можно убить как обычных людей - или волков, - не применяя серебро в форме пуль и распятий, не нужно искать его логово и пресекать на корню, не нужно ядов и противоядий. Во-первых, оборотнем можно быть только от рождения и если кто-то из родителей или предков имел волчью кровь, во-вторых, перестать быть оборотнем невозможно. Правда, можно просто не подавать виду, носить строгий костюмчик и не сдавать нигде кровь, мочу и остальные биоматериалы на анализы, и будет оборотню счастье человеческой жизни.</p>

<p>Так почему же люди стали бояться оборотней, а позже и истреблять? Волки же менее страшны, нежели люди с красными кнопками в чемоданчиках? </p>

<p>А дело в том, что оборотень имеет специфические способности. Нет, они не уникально сильны, не имеют бессмертия или даже жизни за пределами среднего срока человечества, а раны заживают как на собаке, но не сверхъестественно быстро. Полный набор не достался никому. Но было бы несправедливо оставить хороший нюх и рефлексы на долю волчьего обличья, и природа дала оборотням возможность защищать себя в человеческом мире, что стало для них приговором. Каждый оборотень имеет одну сильную сторону. Одну. Не две смежных, а одну, которая, правда, при хороших тренировках может оказаться очень растяжимой. Нет, это не магия, это ближе к эволюции и мутациям. То есть если какой-то предок оборотня жил в условиях, где люди крайне замкнуты и не сильно дружелюбны, у него развилась сильная эмпатия. Настолько сильная, что все его потомки могут отличить ложь от правды, понять истинные чувства человека и предвидеть его поступки. Работает это почти стопроцентно, но не как полиграф, а как интуиция или особое чутье. </p>

<p>В среднем на весь мир 10 человек на 1 оборотня.
Вероятность встретить оборотня в Евразии или Америке выше, чем в Африке или в Австралии.</p>

<p>Там было много всего: стаи с аномальной силой (когда даже дети очень быстро набирают мышечную массу, начинаешь что-то подозревать), стаи с одурманивающей аурой (на деле выделяемые железы имели довольно странный эффект), стаи с великолепным чутьем, которые на фоне прочих казались абсолютно безвредными и т.д. Все они в целом были безвредны, но когда Церковь и другие организации узнали об их существовании и объявили на весь мир - ну не умели тогда молчать, - история свернула в иное русло.</p>

     </div></div>

  <div class="world-block">
  <div class="header">
    <span>Положение оборотней</span>
    </div>
   <img src="https://i.ibb.co/PzDPppW/Untitled-1-copy-12.png">
   </div>
     <div class="info2 closed">     
     <div class="close-btn">— свернуть блок —</div>
       <div>
<h5>Положение оборотней</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>

</p>
     </div></div>

  <div class="world-block">
    <div class="header">
    <span>решения стража</span>
    </div>
    <img src="https://i.ibb.co/NKgbMnM/Untitled-1-copy-05.png"></div>
  <div class="info3 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 3</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
        <div class="header">
    <span>решения хоука</span>
    </div>
    <img src="https://i.ibb.co/XjTwW91/Untitled-1-copy-08.png"></div>
  <div class="info4 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 4</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
        <div class="header">
    <span>решения инквизитора</span>
    </div>
    <img src="https://i.ibb.co/DGVdvtn/Untitled-1-copy-10.png"></div>
  <div class="info5 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 5</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

   <div class="world-block">
     <div class="header">
    <span>расы</span>
    </div>
     <img src="https://i.ibb.co/HpGjmWR/Untitled-1-copy-14.png"></div>
  <div class="info6 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 6</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </div></div>

  <div class="world-block">
     <div class="header">
    <span>круги магов</span>
    </div>
    <img src="https://i.ibb.co/QCXxjdw/Untitled-1-copy-17.png"></div>
  <div class="info7 closed">
         <div class="close-btn">— свернуть блок —</div>
    <div>
<h5>Header text 7</h5>
      <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed pulvinar est. Nam sodales, est a efficitur convallis, sapien ex mollis dolor, eu vestibulum est ex et mi. Nunc quis luctus risus, at ornare tellus. Cras non arcu tellus. Suspendisse vel lacinia urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque feugiat erat ut auctor gravida. Suspendisse aliquet, purus eget posuere scelerisque, eros velit sagittis nibh, ac mattis urna mauris non dolor. Suspendisse dignissim orci nec porttitor condimentum. Nam tellus justo, pulvinar ut mauris a, facilisis volutpat dui. Suspendisse tincidunt elementum quam feugiat malesuada. Praesent congue feugiat lectus molestie consectetur. In eleifend nunc et mauris volutpat elementum. Mauris eget elit turpis. Cras tempus mattis odio eu semper. Donec gravida non nunc quis interdum.</p>
     </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: 584px;  /* ширина контейнера с блоками*/
  position: relative;
  text-align: center;
}

.world-block {
  margin: 1px 0px;  /* нижний и верхний отступ между блоками*/
  padding: 0px;
  display: inline-block;
  line-height: 0;
  width: 290px;  /* ширина блоков */
  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,154,11,0) 0%, rgba(0,0,0,0.29) 18%,rgba(0,0,0,0.48) 39%,rgba(0,0,0,0.69) 74%,rgba(0,0,0,0.85) 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(100%)
}

.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: left;
  display: none;
  box-shadow: 0 0 0 9px #fefefe 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: relative;
  padding-left: 45px
}

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

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

.closed em {
  font: 300 italic 11px merriweather;  /* шрифт мини цитаток */
  display: block;
  border-right: 5px solid rgba(0,0,0,.1);  /* правый бордер мини цитаток*/
  padding-right: 10px;
  text-align: right;
  margin: 10px 0;
}
</style>[/html]