шаблон для хронологии

Код:

[html]

<chronology>
  <epblock>
    <img src="https://i.pinimg.com/736x/91/a5/7b/91a57b8ecea533eaf7cd3f1151efcb0b.jpg">


    <label style="display:block;">
      <input type="checkbox">
      <epdate>12.12.2022</epdate>

    <epdescription>
      Тут текст описания неопределённой многострочной длины. 
    </epdescription>
    </label>

    <a href="#" class="epname">Название эпизода любой длины</a>
<epmembers>
    <a  href="#">Участник 1</a>
    <a  href="#">Участник 2</a>
    <a  href="#">Участник 3</a>

</epmembers>
  </epblock>

  <epblock>
    <img src="https://i.pinimg.com/736x/5e/d0/56/5ed0568bb8e90f683e126e53da12ec9a.jpg">


    <label style="display:block;">
      <input type="checkbox">
      <epdate>12.12.2022</epdate>
    
    <epdescription>
      Учебный год в самом разгаре, началось самое важное событие в жизни любого всадника — Молотьба.
 Связывайтесь с драконами. Оглядывайтесь по сторонам: бездраконные начали убивать.
    </epdescription>
</label>

    <a href="#" class="epname">Название эпизода любой длины</a>

<epmembers>
    <a  href="#">Участник 1</a>
    <a  href="#">Участник 2</a>
    <a  href="#">Участник 3</a>
    <a  href="#">Участник 2</a>
    <a  href="#">Участник 3</a>
</epmembers>

  </epblock>

</chronology>

[/html]

[html]

<style>

chronology {
background: url(https://forumstatic.ru/files/001c/72/80/16767.png) top center no-repeat, rgba(248, 248, 247, 1);
width: 1020px;
height: auto;
border-radius: 15px;
padding: 165px 10px 40px !important;
display: block;
margin: auto!important;
position: relative;
box-sizing: border-box;
}
chronology * {
box-sizing: border-box;

}

epblock > img {
width: 48px;
height: 48px;
object-fit: cover;
border-radius: 50%;
filter: contrast(0.7) grayscale(0.3);
}

chronology::before {
content: '';
position: absolute;
width: 94.6%;
height: calc(100% - 180px);
border-radius: 0 0 15px 15px;
background: rgba(232, 232, 232, 1) !important;
left: 28px;
top: 150px;
}

epblock {
display: flex;
gap: 5px 25px;
position: relative;
width: 93.1%;
height: 75px;
align-items: center;
flex-wrap: wrap;
padding: 10px 20px 10px 13px;
background: rgba(206, 208, 209, 1);
margin: 7px 10px 8px 35px !important;
border-radius: 10px;
box-sizing: border-box;
justify-content: flex-start;
}

epblock input[type="checkbox"] {
display: none;
}

epdescription {
display: none;
position: absolute;
max-width: 83%;
top: 36px;
left: 73px;
background: rgb(var(--canvas-quarternary), 0.7);
backdrop-filter: blur(4px);
color: #ffffff;
border-radius: 15px;
padding: 12px 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
z-index: 10;
}

epdate {
color: rgba(36, 44, 53, 1);
background: linear-gradient(90deg, #D5D5D5 0%, #FFFFFF 100%);
padding: 6px 15px !important;
background-size: 100%;
border-radius: 100px;
border: 1px solid rgba(255, 255, 255, 1);
font-family: Moisette;
font-weight: 600;
font-style: italic;
height: 25px;
font-size: 13px;
text-transform: lowercase;
cursor: help;
display: inline-block;
transition: background-size var(--anim-hover);
}
epdate:hover {
background-size: 200%;
}

input[type="checkbox"]:checked ~ epdescription {
display: block;
}

a.epname {
padding: 5px 15px;
font-family: Moisette;
font-weight: 600;
font-style: italic;
font-size: 15px;
position: absolute;
top: 13px;
left: 185px;
border-bottom: none !important;
line-height: 120%;
text-transform: lowercase;
transition: background var(--anim-hover), color var(--anim-hover);

}

a.epname:hover {

}

epmembers {
display: flex;
gap: 5px;
width: fit-content;
position: absolute;
left: 200px;
bottom: 18px;
}

epmembers a {
background: rgb(146 169 183);
border-radius: 50px;
font-family: Moisette;
font-weight: 600;
font-style: italic;
font-size: 13px;
line-height: 100%;
color: white !important;
text-align: justify;
text-transform: lowercase;
border: 1px solid rgba(255, 255, 255, 1) !important;
padding: 2px 14px;
}

epmembers a:hover {
background:rgba(255, 255, 255, .6);
}

</style>

<epblock>
<label style="display:block;">
<input type="checkbox">
<epdate>12.12.2022</epdate>

<epdescription>
Тут текст описания неопределённой многострочной длины.
</epdescription>
</label>