[html]<style>

.chron-wrapper {
    width: 100%;
    height: 44px;
    margin-bottom: 5px;
    padding: 3px 6px 4px 4px;
    overflow: hidden;
    position: relative;
    clip-path: polygon(2.2% 100%, 0% 83%, 0% 17%, 2.2% 0%, 70% 0%, 74% 44%, 100% 44%, 100% 50%, 94.4% 100%);
}

.side::before {
    content: '';
    width: 900px;
    height: 900px;
    top: -400px;
    left: -100px;
    margin-bottom: 5px;
    padding: 3px 6px 4px 4px;
    position: absolute;
    opacity:.6;
    background: linear-gradient(58deg, rgba(16, 70, 69, 1) 17%, rgba(63, 251, 246, 1) 33%, rgba(62, 69, 136, 1) 49%, rgba(252, 70, 226, 1) 66%, rgba(83, 23, 74, 1) 84%);}

.side:hover::before {
animation: rotate-bg 6s ease-in-out infinite both;
}

.epmain::before {
    content: '';
    width: 900px;
    height: 900px;
    top: -400px;
    left: -100px;
    margin-bottom: 5px;
    padding: 3px 6px 4px 4px;
    position: absolute;
    opacity: .8;
    background: linear-gradient(322deg, #F44336 17%, #E91E63 33%, #9C27B0 49%, rgba(251, 252, 70, 1) 66%, rgba(83, 23, 74, 1) 84%);
}

.epmain:hover::before {
animation: rotate-bg 6s ease-in-out infinite both;
}

@keyframes rotate-bg {
  0% {
    transform: rotate(0); opacity:1;
  }
  100% {
    transform: rotate(360deg); opacity:1;
  }
}

.chron-clip-path {
    clip-path: polygon(2% 100%, 0% 83%, 0% 17%, 2% 0%, 70% 0%, 74% 50%, 100% 50%, 100% 50%, 95% 100%);
    width: 100%;
    height: 35px;
       background: url(https://i.imgur.com/QJbl4f6.png);
    padding: 5px 0px;
    position: relative;
}

.chron-wrapper a {
    font-family:  'GlitchGoblin';
    font-size: 23px;
    display: block;
    color: var(--cyan);
    letter-spacing: 1px;
    padding-left: 35px;
    background: linear-gradient(90deg, #003e6ab8, transparent);
    margin: -5px -2px 8px;
    transition:ease-in-out .4s;
}
.chron-wrapper a:hover {
color:aliceblue;
}

.chron-date {
    position: absolute;
    margin: 4px 0px 0px 0px;
    right: 0px;
    width: 195px;
    padding: 1px 0px 1px 30px;
    font-family: var(--huehuefont);
    font-size: 15px;
    color: aliceblue;
    background: linear-gradient(90deg, #244848, transparent);
}
.main-quest::before {
    content: 'MAIN QUEST';
    font-family: 'GlitchGoblin';
    color: var(--yellow);
    opacity: .7;
    position: absolute;
    margin: 21px 2px;
    right: 29px;
    font-size: 26px;
}

.side-quest::before {
    content: 'SIDE QUEST';
    font-family: 'GlitchGoblin';
    color: var(--cyan);
    opacity: .7;
    position: absolute;
    margin: 21px 2px;
    right: 29px;
    font-size: 26px;
}

.chron-wrapper p {
    font-family: var(--huehuefont);
    font-size: 15px !important;
    margin: -6px 0px !important;
    padding-left: 33px !important;
    color: #f0f8ffd6;
    background: linear-gradient(90deg, #3b004ebf, transparent);
}

.chron-wrapper img {
position: absolute;
    right: 165px;
    margin: -58px 0 0 0;
    opacity: .5;
    object-fit: inherit;
}

details > summary::marker {
    display: none;
    content: '';
}

.chron-desc > p {
    padding: 30px 20px 10px 20px !important;
    background: #00192b82;
    text-align: justify;
    margin: -20px 30px 5px 17px !important;
    border: 2px solid #1c6e73;
}

.chron-spoiler {
transition:ease-in-out .4s;
}

</style>

<div class='chron-date'>Найт-Сити, 00.00.2077</div>
<section class='chron-wrapper side'>
<div class='chron-clip-path side-quest'><a href='ссылка_на_эпизод'>Episode Name</a>
<p>Имя участника, Имя участника</p>
<img src='https://i.imgur.com/zemHax8.png'></img>
</div></section>

<div class='chron-date'>Другое место, 00.00.2077</div>
<section class='chron-wrapper epmain'>
<div class='chron-clip-path main-quest'><a href='ссылка_на_эпизод'>Episode Name</a>
<p>Имя участника, Имя участника</p>
<img src='https://i.imgur.com/7NrXexL.png'></img>
</div></section>

<div class='chron-date'>Другое место, 00.00.2077</div>
<section class='chron-wrapper side'>
<div class='chron-clip-path side-quest'><a href='ссылка_на_эпизод'>Episode Name</a>
<p>Имя участника, Имя участника</p>
<img src='https://i.imgur.com/kJYYlAN.png'></img>
</div></section>

<details>
  <summary class='chron-spoiler'>
    <div class='chron-date'>Другое место, 00.00.2077</div>
    <section class='chron-wrapper side'>
      <div class='chron-clip-path side-quest'>
        <a href='ссылка_на_эпизод'>Episode Name</a>
        <p>Имя участника, Имя участника</p>
        <img src='https://i.imgur.com/kJYYlAN.png'></img>
      </div>
    </section>
  </summary>
  <div class="chron-desc">
    <!-- Здесь будет текстовое описание, которое откроется по клику -->
    <p>Описание эпизода или дополнительная информация.</p>
  </div>
</details>

<details>
  <summary class='chron-spoiler'>
    <div class='chron-date'>Другое место, 00.00.2077</div>
    <section class='chron-wrapper side'>
      <div class='chron-clip-path side-quest'>
        <a href='ссылка_на_эпизод'>Episode Name</a>
        <p>Имя участника, Имя участника</p>
        <img src='https://i.imgur.com/kJYYlAN.png'></img>
      </div>
    </section>
  </summary>
  <div class="chron-desc">
    <!-- Здесь будет текстовое описание, которое откроется по клику -->
    <p>Описание эпизода или дополнительная информация.</p>
  </div>
</details>

[/html]

Подпись автора

подпись с картинкой в правом углу
КАРТИНКА