[html]
<style>
section.daily-count {
    position: relative;
    margin: auto !important;
    background: url(https://forumstatic.ru/files/001c/b4/c9/14458.png) no-repeat center / contain;
    width: 964px;
    height: 660px;
}
section.daily-count * {
box-sizing: border-box;
}

section.daily-count div.desc {
position: absolute;
    top: 152px;
    left: 514px;
    width: 330px;
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: rgba(55, 55, 55, 1);
    flex-direction: column;
    align-items: center;
    text-align: center;
}

section.daily-count div.desc ttl {
font-family: Playfair Display;
font-weight: 700;
font-size: 14px;
line-height: 121%;
letter-spacing: -5%;
text-align: center;
}

section.daily-count div.daily-block {
    width: 312px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 17px 10px;
    position: absolute;
    top: 150px;
    left: 115px;
}

section.daily-count div.daily-block day {
    border: 1px solid rgba(175, 175, 175, 1);
    display: block;
    height: 26px;
    border-radius: 5px;
    background-color: rgba(242, 243, 246, 1);
    position: relative;
    font-family: Playfair Display;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 2%;
    padding: 6px 5px 5px 19px;
    font-variant-numeric: lining-nums;
}

section.daily-count div.daily-block day::before {
content:'';
width: 7px;
height: 7px;
border-radius: 50%;
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
background-color: rgb(var(--accent));
}

section.daily-count div.daily-block day.bigday {
    grid-column: span 6;
    background: transparent;
    border: none;
    display: flex;
    height: 26px;
    align-items: center;
    padding: 0;
}

section.daily-count div.daily-block day.d__0 {
opacity: .3;
filter: grayscale(1);
}

section.daily-count div.daily-block day.bigday::before {
content: none;
}

section.daily-count div.daily-block day.bigday desc {
    border: 1px solid rgba(175, 175, 175, 1);
    display: block;
    height: 26px;
    border-radius: 5px;
    background-color: rgba(242, 243, 246, 1);
    padding: 5px 5px 5px 19px;
    box-shadow: 0px 4px 32.8px 0px rgba(0, 0, 0, 0.5);
    margin-left: -7px;
    flex-grow: 1;

}

section.daily-count div.daily-block day.bigday > div {
    display: block;
    height: 24px;
    width: 40px;
    border-radius: 5px;
    background-color: rgba(242, 243, 246, 1);
    padding: 5px 5px 5px 9px;
background-color: rgb(var(--accent));
color: rgba(255, 255, 255, 1);
}

section.daily-count div.rewards {
    width: 312px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    position: absolute;
    top: 510px;
    left: 115px;
}

section.daily-count div.rewards::before {
content: 'награды';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-family: Playfair Display;
    font-weight: 700;
    font-size: 14px;
    line-height: 121%;
    letter-spacing: -5%;
    text-align: center;
    color: rgba(55, 55, 55, 1);
}

section.daily-count div.rewards rew {
    display: block;
    min-height: 24px;
    border-radius: 5px;
    background-color: rgba(242, 243, 246, 1);
    padding: 6px 5px 5px 9px;
background-color: rgb(var(--accent));
color: rgba(255, 255, 255, 1);
font-size: 10px;

}

</style>

<section class='daily-count'>

<!---------------------- ОПИСАНИЕ СПРАВА ---------------------------------------->
<div class='desc'><ttl>дейлики</ttl>
I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me. I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me I can't be canceled, there's no way that you can stop meI'm fully independent, there's no label who can drop me
</div>

<!----------------------- ОТСЮДА ДНИ ---------------------------------------------->
<!--------- __1 - открытый день, __0 - закрытый ------------>

<div class='daily-block'>

<day class='d__1'>1</day>
<day class='d__1'>2</day>
<day class='d__1'>3</day>
<day class='d__1'>4</day>
<day class='d__1'>5</day>
<day class='d__1'>6</day>
<day class='d__1 bigday'><div>7</div><desc>краткое описание</desc></day>

<day class='d__1'>8</day>
<day class='d__1'>9</day>
<day class='d__1'>10</day>
<day class='d__1'>11</day>
<day class='d__1'>12</day>
<day class='d__1'>13</day>
<day class='d__1 bigday'><div>14</div><desc>краткое описание</desc></day>

<day class='d__1'>15</day>
<day class='d__1'>16</day>
<day class='d__1'>17</day>
<day class='d__1'>18</day>
<day class='d__1'>19</day>
<day class='d__1'>20</day>
<day class='d__1 bigday'><div>21</div><desc>краткое описание</desc></day>

<day class='d__1'>22</day>
<day class='d__1'>23</day>
<day class='d__1'>24</day>
<day class='d__1'>25</day>
<day class='d__1'>26</day>
<day class='d__1'>27</day>
<day class='d__1 bigday'><div>28</div><desc>краткое описание</desc></day>
</div>

<div class='rewards'>
<rew>краткое описание награды </rew>
<rew>краткое описание награды </rew>
<rew>краткое описание награды </rew>
<rew>краткое описание награды </rew>

</div>

</section>
[/html][hideprofile]