Этот код не является обязательным! Вы можете оформлять хронологию по своему усмотрению.

КОДЫ ДЛЯ ХРОНОЛОГИИ ХТМЛ

[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">

<style>
  /* Основные переменные для стилей */
  .chr0 {
    --marg: auto;
    --bgclr: transparent;
    --shp1: #171b1c;
    --shc: #c9c5b8;
    --shs: rgba(255, 255, 255, 0.05);
    --epc: #7e8474;
    --epa: #171b1c;
    --epz: #858181;
  }

  /* Общие настройки */
  .chr0 * {
    box-sizing: border-box;
  }

  .chr0 {
    max-width: 100%;   /* Сделано динамичным */
    min-width: 0;      /* Убираем минимальную ширину */
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    display: block;
    padding-bottom: 6px;
    background: var(--bgclr);
    border-radius: 12px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;     /* шрифт эпизода */
  }

  /* Убираем интервалы между абзацами внутри .ep-desc */
  .chr0 .ep-desc p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4; /* контроль высоты строки для абзацев */
  }

  /* Стили шапки */
  .shpk1 {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    margin: 10px 0 20px;
    padding: 14px 35px 14px 10px;
    background: var(--shp1);
    color: var(--shc);
    text-shadow: 0 1px 6px var(--shs);
  }

  .shpk1 img {
    object-fit: cover;
    object-position: 50% 50%;
    margin: auto;
    width: 150px;
    height: 60px;
  }

  .shpk1 > ul {
    grid-column: 2 / 3;
  }

  .shpk1 > ul li:first-child {
    font-family: Oswald, Georgia, serif;
    font-size: 30px; /* шапка текст заглавный */
  }

  .shpk1 > ul li:nth-child(2) {
    padding-top: 4px;
    font-style: italic;
    font-size: 12px;   /* фраза смысла бытия */
    font-family: Georgia, serif;
    letter-spacing: 0.06em;
    opacity: 0.5;
  }

  .chr0 .shpk1:first-child {
    margin-top: 0;
  }

  /* Стили эпизодов */
  .chr0 p, p.epp {
    display: block;
    padding: 0 30px 26px !important;
  }

  p.epp > em {
    display: block;
    padding: 4px 0;
    font-style: normal !important;
    font-size: 13px; /* участники */
    font-family: Georgia, Tahoma, serif;
    opacity: 0.8;
  }

  .chr0 a {
    color: var(--epc);
    text-decoration: none;
  }

  .chr0 a:hover {
    filter: brightness(1.25);
  }

  .chr0 .epp a.act {
    color: var(--epa);
  }

  .chr0 .epp a.close {
    color: var(--epz);
  }

  .epp a.close:before {
    content: '×';
    margin-right: 8px;
  }

  .epp > a {
    font-family: Oswald, Georgia, serif;
    font-size: 20px;    /* шрифт названия эпа */
  }

  .ep-desc {
    max-height: 100px;
    overflow: auto;
    padding-right: 20px;
  }

  /* Адаптивные стили для мобильных устройств */
  @media (max-width: 540px) {
    .shpk1 {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 11px;
    }

    .shpk1 img {
      width: 100%;    /* Ширина изображения 100% */
      height: auto;   /* Высота автоматически пропорциональна */
      max-height: 150px;
      margin-bottom: 10px;
    }

    .shpk1 ul {
      padding: 10px 15px;
    }

    .shpk1 ul li:first-child {
      font-size: 24px;
    }

    .shpk1 ul li:nth-child(2) {
      font-size: 10px;
      line-height: 1.4;
      max-width: 90%;
      margin: 0 auto;
      text-align: center;
    }

    /* Паддинги и ширина контейнера для мобильных устройств */
    .chr0 {
      width: 100%; /* Контейнер теперь может изменять свою ширину */
      margin: 10px; /* Меньше отступов */
    }

    .chr0 p, p.epp {
      padding: 0 10px 15px !important; /* Уменьшаем отступы для маленьких экранов */
    }
  }
</style>

<div class="chr0">
  <!-- !!!ЧАСТЬ БЛОКА НАСТОЯЩЕЕ!!! -->
  <div class="shpk1">
    <img src="https://i.pinimg.com/564x/b7/19/90/b71990b60cb37a80d099c970b826a953.jpg" decoding="async">
    <ul>
      <li>Настоящее</li>
      <li>ваша очень красивая фраза о смысле бытия</li>
    </ul>
  </div>

  <p class="epp">
    <a href="ссылка" class="act">Название эпизода</a>
    <em>Дата // Участник 1, Участник 2</em>
    <div class="ep-desc">Описание эпизода может быть длинным</div>
  </p>
  <p class="epp">
    <a href="ссылка" class="close">Название эпизода</a>
    <em>Дата // Участник 1, Участник 2</em>
    <div class="ep-desc">Описание эпизода может быть длинным</div>
  </p>

  <!-- !!!ЧАСТЬ БЛОКА ПРОШЛОГО!!! -->
  <div class="shpk1">
    <img src="https://i.pinimg.com/564x/5d/94/aa/5d94aaaccc2c141e50e762308aed6e89.jpg" decoding="async">
    <ul>
      <li>Прошлое</li>
      <li>ваша очень красивая фраза о смысле бытия</li>
    </ul>
  </div>

  <p class="epp">
    <a href="ссылка" class="act">Название эпизода</a>
    <em>Дата // Участник 1, Участник 2</em>
    <div class="ep-desc">Описание эпизода может быть длинным
</div>
  </p>
  <p class="epp">
    <a href="ссылка" class="close">Название эпизода</a>
    <em>Дата // Участник 1, Участник 2</em>
    <div class="ep-desc">Описание эпизода, возможно, длинное...</div>
  </p>
</div>
[/html]

КОД ДЛЯ ВСЕГО БЛОКА

Код:
[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">

<style>
  /* Основные переменные для стилей */
  .chr0 {
    --marg: auto;
    --bgclr: transparent;
    --shp1: #171b1c; 
    --shc: #c9c5b8;
    --shs: rgba(255, 255, 255, 0.05); 
    --epc: #7e8474;
    --epa: #171b1c; 
    --epz: #858181;
  }

  /* Общие настройки */
  .chr0 * {
    box-sizing: border-box;
  }

  .chr0 {
    max-width: 100%;
    min-width: 0; 
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    display: block;
    padding-bottom: 6px;
    background: var(--bgclr);
    border-radius: 12px;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 13px;
  }

  /* Убираем интервалы между абзацами внутри .ep-desc */
  .chr0 .ep-desc p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4;
  }

  /* Стили шапки */
  .shpk1 {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: center;
    margin: 10px 0 20px;
    padding: 14px 35px 14px 10px;
    background: var(--shp1);
    color: var(--shc);
    text-shadow: 0 1px 6px var(--shs);
  }

  .shpk1 img {
    object-fit: cover;
    object-position: 50% 50%;
    margin: auto;
    width: 150px;
    height: 60px;
  }

  .shpk1 > ul {
    grid-column: 2 / 3;
  }

  .shpk1 > ul li:first-child {
    font-family: Oswald, Georgia, serif;
    font-size: 30px;
  }

  .shpk1 > ul li:nth-child(2) {
    padding-top: 4px;
    font-style: italic;
    font-size: 12px;
    font-family: Georgia, serif;
    letter-spacing: 0.06em;
    opacity: 0.5;
  }

  .chr0 .shpk1:first-child {
    margin-top: 0;
  }

  /* Стили эпизодов */
  .chr0 p, p.epp {
    display: block;
    padding: 0 30px 26px !important;
  }

  p.epp > em {
    display: block;
    padding: 4px 0;
    font-style: normal !important;
    font-size: 13px;
    font-family: Georgia, Tahoma, serif;
    opacity: 0.8;
  }

  .chr0 a {
    color: var(--epc);
    text-decoration: none;
  }

  .chr0 a:hover {
    filter: brightness(1.25);
  }

  .chr0 .epp a.act {
    color: var(--epa);
  }

  .chr0 .epp a.close {
    color: var(--epz);
  }

  .epp a.close:before {
    content: '×';
    margin-right: 8px;
  }

  .epp > a {
    font-family: Oswald, Georgia, serif;
    font-size: 20px; 
  }

  .ep-desc {
    max-height: 100px;
    overflow: auto;
    padding-right: 20px;
  }

  /* Адаптивные стили для мобильных устройств */
  @media (max-width: 540px) {
    .shpk1 {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 11px;
    }

    .shpk1 img {
      width: 100%;  
      height: auto; 
      max-height: 150px;
      margin-bottom: 10px;
    }

    .shpk1 ul {
      padding: 10px 15px;
    }

    .shpk1 ul li:first-child {
      font-size: 24px;
    }

    .shpk1 ul li:nth-child(2) {
      font-size: 10px;
      line-height: 1.4;
      max-width: 90%;
      margin: 0 auto;
      text-align: center;
    }

    /* Паддинги и ширина контейнера для мобильных устройств */
    .chr0 {
      width: 100%; 
      margin: 10px; 
    }

    .chr0 p, p.epp {
      padding: 0 10px 15px !important; 
    }
  }
</style>

<!--— !!!START!!! --->
<div class="chr0">
  <!-- !!!ЧАСТЬ БЛОКА НАСТОЯЩЕЕ!!! -->
  <div class="shpk1">
    <img src="https://i.pinimg.com/564x/b7/19/90/b71990b60cb37a80d099c970b826a953.jpg" decoding="async">
    <ul>
      <li>Настоящее</li>
      <li>ваша очень красивая фраза о смысле бытия</li>
    </ul>
  </div>

  <!-- !!!СЮДА ВСТАВИТЬ КОД ЭПИЗОДА ЗАКРЫТОГО ИЛИ ОТКРЫТОГО!!! -->

  <!-- !!!ЧАСТЬ БЛОКА ПРОШЛОГО!!! -->
  <div class="shpk1">
    <img src="https://i.pinimg.com/564x/5d/94/aa/5d94aaaccc2c141e50e762308aed6e89.jpg" decoding="async">
    <ul>
      <li>Прошлое</li>
      <li>ваша очень красивая фраза о смысле бытия</li>
    </ul>
  </div>

  <!-- !!!СЮДА ВСТАВИТЬ КОД ЭПИЗОДА ЗАКРЫТОГО ИЛИ ОТКРЫТОГО!!! -->

</div>[/html]

 

Ваша зона начинается на блоке  <!--— !!!START!!! ---> почти в самом низу.
В блоках     <!-- !!!ЧАСТЬ БЛОКА НАСТОЯЩЕЕ!!! --> и    <!-- !!!ЧАСТЬ БЛОКА ПРОШЛОГО!!! --> Вы можете заменить красивую фразу и картинку. Картинка сама будет уменьшаться под нужные параметры, вам нужно вставить только ссылку.
Данный код содержит только разделы-шапки Прошлое и Настоящее. Блоки под открытые и закрытые эпизоды различны. Их нужно вставлять вместо или после <!-- !!!СЮДА ВСТАВИТЬ КОД ЭПИЗОДА ЗАКРЫТОГО ИЛИ ОТКРЫТОГО!!! --> в соответствии с тем, как вы хотите, чтобы у вас отображались игры - с крестиком или без. Это не принципиально и скорее вкусовщина. Можете ставить всё без крестика, чтобы не переделывать по нескольку раз.

КОД ДЛЯ ОТКРЫТОГО ЭПИЗОДА (без крестика)

Код:
  <p class="epp">
    <a href="ссылка на эпизод" class="act">Название эпизода</a>
    <em>Дата // Участник 1, Участник 2</em>
    <div class="ep-desc">Описание эпизода, возможно, длинное...</div>
  </p>

КОД ДЛЯ ЗАКРЫТОГО ЭПИЗОДА (с крестиком)

Код:
 <p class="epp">
    <a href="ссылка на эпизод" class="close">Название эпизода</a>
    <em>Дата // Участник 1, Участник 2</em>
    <div class="ep-desc">Описание эпизода, возможно, длинное...</div>
  </p>

Если Вам нужно сделать абзац в описании эпизода, воспользуйтесь следующем кодом:

Код:
<p>Это абзац текста. Здесь может быть любой контент, который вы хотите отобразить как один параграф. Следующий абзац нужно будет заключить в подобный же код</p>

Если у Вас появляются вопросы или требуется помощь, обращайтесь к администратору.