.progress__container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
/****GRID BLOCK****/
.grid {
    display: grid;
    grid-auto-rows: minmax(131px, 1fr) minmax(126px, 1fr) minmax(115px, 1fr) minmax(126px, 1fr);
    grid-template-rows: unset !important;
    width: 100%;
    margin: 0 auto;
}

.grid__row {
    position: relative;
}

.grid__row:not(:last-child)::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 2px;
    opacity: 0.1;
    background: linear-gradient(90deg, rgba(11, 19, 43, 0.00) 0%, #0B132B 15.77%, #0B132B 78.72%, rgba(11, 19, 43, 0.00) 100%);
}

.grid__icon {
    flex-shrink: 0;
}

.grid__cell {
    position: relative;
    height: 100%;
    width: 100% !important;
    display: flex;
    align-items: center;
}

.grid__cell.grid__left {
    justify-content: start;
}

.grid__cell.grid__right {
    justify-content: flex-end !important;
}

.grid__cell:not(:last-child) {
    padding-right: 18px;
}

.grid__cell:not(:first-child) {
    padding-left: 16px;
}

.grid__row-37-63 .grid__cell:not(:last-child)::after {
    content: ' ';
    position: absolute;
    display: block;
    right: 0;
    width: 2px;
    height: 100%;
    opacity: 0.1;
    background: linear-gradient(0deg, #0B132B 50%, rgba(11, 19, 43, 0.00) 100%);
}

.grid__row-56-44 .grid__cell:not(:last-child)::after {
    content: ' ';
    position: absolute;
    display: block;
    right: 0;
    width: 2px;
    height: 100%;
    opacity: 0.1;
    background: #0B132B;
}

.grid__flex {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 16px;
    flex-wrap: wrap;
}

.grid__text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.grid__coumnn {
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: start;
    justify-content: center;
}

.grid__row-37-63 {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(37%, auto) minmax(auto, 63%);
   
}
.grid__row-37-63 .grid__cell,
.grid__row-56-44 .grid__cell{
    padding-top: 10px;
    padding-bottom: 10px;
}
.grid__row-100 {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.grid__row-56-44 {
    display: grid;
    align-items: center;
    grid-template-columns: 55.68% 44.32%;
}

.grid__percent {
    font-size: 24px;
    color: var(--color-title);
    font-weight: 600;
    line-height: 1.3;
}

.grid__row .grid__text {
    font-size: 12px;
    font-weight: 600;
}

.grid__month {
    color: var(--color-title);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
}

.grid__row .grid__number {
    font-size: 36px;
    color: var(--color-title);
    font-weight: 700;
    line-height: 1.3;
}

.grid__row .grid__number-miiddle {
    font-size: 44px;
    color: var(--color-title);
    font-weight: 700;
    line-height: 1.3;
}

.grid__row-title .grid__number {
    font-size: 60px;
    color: var(--color-title);
    font-weight: 700;
    line-height: 1.3
}

.grid__amount {
    display: flex;
    gap: 4px;
    align-items: center;
}

.grid__row-title .grid__text {
    color: var(--color-title);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.grid__row-title .grid__text-small {
    font-size: 12px;
    text-align: right;
}

.grid__row-100 .grid__flex {
    justify-content: center;
    width: fit-content;
}
.small-img {
    width: 46px;
    height: 46px;
}
.big-img {
    width: 50px;
    height: 50px;
}


/****GRID BLOCK end****/
@media screen and (min-width: 560px) {
    .progress__title {
        text-align: center;
    }
    .grid__flex {
        flex-wrap: nowrap;
    }
}
@media screen and (min-width: 768px) {
    .progress__title {
        text-align: left;
    }
 .progress__container {
        flex-direction: row;
        align-items: start;
        justify-content: space-between;
    }
    .progress__block {
        flex: 0 0 50%;
    }
    .progress__block-desc {
        flex: 0 0 calc(50% - 31px);
    }
       .grid__flex {
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 1024px) {
    .progress__block {
        flex: 0 0 calc((((100% - (11 *20px)) / 12) * 8) + (20px * 7));
    }
    
    .progress__block-desc {
        flex: 0 0 calc((((100% - (11 *20px)) / 12) * 4) + (20px * 3));
    }
  
}
@media screen and (min-width: 1025px) {
     .grid {
        grid-auto-rows: minmax(199px, 1fr) minmax(200px, 1fr) minmax(179px, 1fr) minmax(152px, 1fr);
        grid-template-rows: unset !important;
    }
    
    .grid__cell:not(:first-child) {
        padding-left: 54px;
    }
    
    .grid__cell:not(:last-child) {
        padding-right: 56px;
    }
    
    .grid__row .grid__text,
    .grid__row-title .grid__text-small {
         font-size: 16px;
     }
    
    .grid__row .grid__number {
        font-size: 56px;
    }
    .small-img {
        width: 56px;
        height: 56px;
    }
    .big-img {
        width: 60px;
        height: 60px;
    }
    .grid__percent {
        font-size: 32px;
    }
    .grid__row-title .grid__number {
        font-size: 80px;
        margin-left: 24px;
    }
    .grid__number.grid__number-small {
        margin-left: 16px;
    }
    .grid__row .grid__number-miiddle {
        font-size: 64px;   
    }
    .grid__month {
        font-size: 32px;
        margin-left: 4px;
    }

   .grid__coumnn-adaptive {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        margin-left: 8px;
    }

}
@media screen and (min-width: 1180px) {
    .grid__flex {
        flex-wrap: nowrap;
    }
}

@media screen and (min-width: 1281px) {
    .progress__container {
        justify-content: space-between;
        align-items: start;
    }
    
    .grid__flex {
        gap: 24px;}
    .grid__row-title .grid__flex{
        gap: 16px;
    }
}