гейм чаленгез

[html]
<style>
section.post-challenges {
width: 925px;
height: 571px;
margin: auto !important;
background: url(https://forumstatic.ru/files/001c/be/3c/81262.png) no-repeat top;
box-sizing: border-box;
padding: 138px 44px 0;
}

section.post-challenges * {
box-sizing: border-box;
position: relative;
}

section.post-challenges .challenges-wrapper {
width: 838px;
height: 433px;
border-radius: 10px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(207, 199, 177, 1);
background-color: rgba(245, 240, 235, 1);
padding: 21px 8px 18px 18px;
}

section.post-challenges .challenges-wrapper > div {
overflow: auto;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 15px;
padding-right: 5px
}

section.post-challenges .challenges-wrapper ttl {
background: linear-gradient(90deg, #EAE1D5 0%, #E6DFD6 100%);
display: block;
font-family: Playfair Display;
font-weight: 600;
font-size: 12px;
line-height: 1;
letter-spacing: -2%;
text-align: center;
text-transform: lowercase;
color: rgba(145, 73, 66, 1);
padding: 5px 0 7px;
border-radius: 5px;
}

section.post-challenges .challenges-wrapper > div > div {
width: 98%;
display: grid;
grid-template-columns: 3fr 1fr .8fr .1fr;
gap: 30px;
align-items: center;
}

section.post-challenges .challenges-wrapper > div > div::after{
content:'';
width: 9px;
height: 9px;
display: block;
border-radius: 50%;
}

section.post-challenges .challenges-wrapper > div > div.ch_off::after{
background: linear-gradient(90deg, #B96D66 0%, #813930 100%);
}

section.post-challenges .challenges-wrapper > div > div.ch_on::after{
background: linear-gradient(90deg, #B96D66 0%, #813930 100%);
}

section.post-challenges .challenges-wrapper > div .ch-users,
section.post-challenges .challenges-wrapper > div rew {
justify-self: anchor-center;
text-align: center;
}

section.post-challenges .challenges-wrapper > div desc {
font-size: 10px !important;
color: rgba(74, 74, 74, 1);
}

section.post-challenges .challenges-wrapper > div desc::before {
content: attr(data-title);
width: 100%;
display: block;
margin-bottom: 10px;
font-family: Playfair Display;
font-weight: 700;
font-size: 16px;
line-height: 121%;
letter-spacing: -5%;
color: rgba(145, 73, 66, 1);
}

section.post-challenges .challenges-wrapper > div rew::before {
content: attr(data-title);
width: 100%;
display: block;
margin-bottom: 10px;
font-family: Playfair Display;
font-weight: 700;
font-style: Bold;
font-size: 12px;
line-height: 1;
text-align: center;
color: rgba(145, 73, 66, 1);
}

section.post-challenges .challenges-wrapper > div rew {
font-size: 10px !important;
color: rgba(74, 74, 74, 1);
display: flex;
gap: 0 5px;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

section.post-challenges .challenges-wrapper > div rew::after {
content:'';
width: 17px;
height: 17px;
display: inline-block;
background: url(https://forumstatic.ru/files/001c/be/3c/68938.png) no-repeat center / contain;
}

section.post-challenges .challenges-wrapper > div .ch-users a {
color: black !important;
font-family: Playfair Display;
font-weight: 700;
font-size: 12px;
line-height: 1;
text-align: center;
}

section.post-challenges .challenges-wrapper > div .ch-users span{
color: rgba(145, 73, 66, 1);
font-family: Playfair Display;
}

</style>

<ttl>блаблабла блаблабла бла</ttl>

<div class='ch_on'>
<desc data-title='название задания'>
Разумным, чтобы путать ослепляющие чувства и жар в крови со своими настоящими желаниями. благодаря этому кай быстро достиг той грани, за которой разверзается хаос. так как к тому времени он забыл, что такое счастье.</desc>

<rew data-title='награда'> 15 люменов</rew>