.ranking-section {
    padding: 50px 0;
}

.ranking-section:not(.ranking_section__no_background) {
    background:
            url("data:image/svg+xml,%3Csvg width='595' height='580' viewBox='0 0 595 580' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.8'%3E%3Cpath d='M7.70125 296.663L155.067 149.213' stroke='url(%23paint0_linear_9530_29416)' stroke-width='4.38235'/%3E%3Cpath d='M93.5286 673.173L542.389 224.057' stroke='url(%23paint1_linear_9530_29416)' stroke-width='1.46078'/%3E%3Cpath d='M170.678 180.809L290.276 61.143' stroke='url(%23paint2_linear_9530_29416)' stroke-width='1.46078'/%3E%3Cpath d='M-54.763 683.592L317.688 310.932' stroke='url(%23paint3_linear_9530_29416)' stroke-width='7'/%3E%3Cpath d='M-167.19 715.089L293.087 254.552' stroke='url(%23paint4_linear_9530_29416)' stroke-width='1.46078'/%3E%3Cpath d='M426.725 216.388L534.299 108.752' stroke='url(%23paint5_linear_9530_29416)' stroke-width='7'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_9530_29416' x1='91.2625' y1='137.275' x2='67.6774' y2='305.092' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233CB371'/%3E%3Cstop offset='1' stop-color='%233CB371' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_9530_29416' x1='353.254' y1='197.476' x2='282.664' y2='699.754' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFCB3F'/%3E%3Cstop offset='1' stop-color='%23FFCB3F' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_9530_29416' x1='239.881' y1='54.0605' x2='221.072' y2='187.891' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFCB3F'/%3E%3Cstop offset='1' stop-color='%23FFCB3F' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_9530_29416' x1='356.69' y1='195.88' x2='-41.1186' y2='678.676' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233CB371'/%3E%3Cstop offset='1' stop-color='%233CB371' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_9530_29416' x1='99.1411' y1='227.295' x2='26.7553' y2='742.347' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFCB3F'/%3E%3Cstop offset='1' stop-color='%23FFCB3F' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint5_linear_9530_29416' x1='542.006' y1='91.1962' x2='417.882' y2='231.694' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233CB371'/%3E%3Cstop offset='1' stop-color='%233CB371' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A"),
            url("data:image/svg+xml,%3Csvg width='595' height='814' viewBox='0 0 595 814' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M216 1039.95L1136.71 72.1452' stroke='url(%23paint0_linear_9530_29423)' stroke-width='594.404'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_9530_29423' x1='1113.27' y1='-579.223' x2='872.743' y2='1132.25' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23014C6B'/%3E%3Cstop offset='1' stop-color='%23014C6B' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E"),
            #1C2642;
    background-position: left bottom, right bottom;
    background-repeat: no-repeat, no-repeat;
}

.ranking-section .ranking-section__title {
    font-size: 22px;
    font-family: var(--primary-font-family);
    font-weight: 700;
    color: #fff;
    position: relative;
    padding-bottom: 7px;
    margin-bottom: 13px;
    margin-top: 0;
    line-height: 33px;
}

.ranking_section__no_background .ranking-section__title {
    color: #1C2642;
}

.ranking-section .ranking-section__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 5px;
    background: #3cb371;
    border-radius: 30px;
}

.ranking-section .ranking-section__text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
    color: #fff;
}

.ranking_section__no_background .ranking-section__text {
    color: #2E364E;
}

.ranking-section .ranging-section__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ranking-section .ranking-section__item {
    width: 49.5%;
    margin-bottom: 12px;
    background-color: #fff;
    border-radius: 4px;
    padding: 20px 104px 20px 28px;
    position: relative;
}

.ranking_section__no_background .ranking-section__item {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.04), 0px 8px 24px rgba(0, 0, 0, 0.08);
}

.ranking-section__converted .ranking-section__item {
    padding: 20px 28px;
}

.ranking-section .ranking-section__item-title {
    font-family: var(--primary-font-family);
    font-size: 18px;
    font-weight: 700;
    color: #1C2642;
}

.ranking-section .ranking-section__item-text {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px;
    color: #2E364E;
}

.ranking-section .ranking-section__item-image-wrapper {
    position: absolute;
    width: 56px;
    height: 56px;
    background-color: #E1F4E7;
    border-radius: 60px;
    top: 55px;
    right: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ranking-section .ranking-section__item-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.ranking-section .ranking-section__button {
    height: 42px;
    display: block;
    margin: 0 auto;
    width: max-content;
    padding: 8px 48px 10px 24px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 42px;
    position: relative;
    font-family: var(--primary-font-family);
    font-weight: 700;
    font-size: 16px;
    background-color: #1c2642;
}

.ranking-section .ranking-section__button::after {
    content: "\0279E";
    display: block;
    position: absolute;
    -webkit-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    color: #fff;
    top: 11px;
    right: 24px;
    font-size: 15px;
    font-family: var(--primary-font-family);
}

.ranking-section .ranking-section__button:hover {
    color: #fff;
    background-color: #033F58;
    border-color: #033F58;
    text-decoration: none;
}

.ranking-section .ranking-section__button:hover::after {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

@media screen and (max-width: 767px) {
    .ranking-section.ranking_section__no_background {
        padding: 24px 0 0;
    }

    .ranking-section:not(.ranking_section__no_background) {
        padding: 24px 0;
        background:
                url("data:image/svg+xml,%3Csvg width='595' height='580' viewBox='0 0 595 580' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.8'%3E%3Cpath d='M7.70125 296.663L155.067 149.213' stroke='url(%23paint0_linear_9530_29416)' stroke-width='4.38235'/%3E%3Cpath d='M93.5286 673.173L542.389 224.057' stroke='url(%23paint1_linear_9530_29416)' stroke-width='1.46078'/%3E%3Cpath d='M170.678 180.809L290.276 61.143' stroke='url(%23paint2_linear_9530_29416)' stroke-width='1.46078'/%3E%3Cpath d='M-54.763 683.592L317.688 310.932' stroke='url(%23paint3_linear_9530_29416)' stroke-width='7'/%3E%3Cpath d='M-167.19 715.089L293.087 254.552' stroke='url(%23paint4_linear_9530_29416)' stroke-width='1.46078'/%3E%3Cpath d='M426.725 216.388L534.299 108.752' stroke='url(%23paint5_linear_9530_29416)' stroke-width='7'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_9530_29416' x1='91.2625' y1='137.275' x2='67.6774' y2='305.092' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233CB371'/%3E%3Cstop offset='1' stop-color='%233CB371' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_9530_29416' x1='353.254' y1='197.476' x2='282.664' y2='699.754' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFCB3F'/%3E%3Cstop offset='1' stop-color='%23FFCB3F' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint2_linear_9530_29416' x1='239.881' y1='54.0605' x2='221.072' y2='187.891' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFCB3F'/%3E%3Cstop offset='1' stop-color='%23FFCB3F' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_9530_29416' x1='356.69' y1='195.88' x2='-41.1186' y2='678.676' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233CB371'/%3E%3Cstop offset='1' stop-color='%233CB371' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint4_linear_9530_29416' x1='99.1411' y1='227.295' x2='26.7553' y2='742.347' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFCB3F'/%3E%3Cstop offset='1' stop-color='%23FFCB3F' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint5_linear_9530_29416' x1='542.006' y1='91.1962' x2='417.882' y2='231.694' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233CB371'/%3E%3Cstop offset='1' stop-color='%233CB371' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A"),
                #1C2642;
        background-position: left bottom;
        background-repeat: no-repeat;
    }

    .ranking-section .ranking-section__title {
        margin-bottom: 16px;
    }

    .ranking-section .ranking-section__text {
        font-size: 14px;
        line-height: 21px;
        margin-bottom: 17px;
    }

    .ranking-section .ranging-section__list {
        display: flex;
        flex-wrap: nowrap;
        overflow: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-bottom: 24px;
        width: calc(100% + 30px);
        position: relative;
        left: -15px;
        padding-left: 15px;
    }

    .ranking-section.ranking_section__no_background .ranging-section__list {
        margin-bottom: 0;
        padding-bottom: 20px;
    }

    .ranking-section .ranging-section__list::-webkit-scrollbar {
        display: none;
    }

    .ranking-section .ranking-section__item {
        width: 262px;
        margin-bottom: 0;
        margin-right: 8px;
        background-color: #fff;
        border-radius: 4px;
        padding: 16px 20px 74px 20px;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .ranking-section__converted .ranking-section__item {
        padding: 16px 20px;
    }

    .ranking-section .ranking-section__item-title {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .ranking-section .ranking-section__item-text {
        font-size: 14px;
        line-height: 21px;
    }

    .ranking-section .ranking-section__item-image-wrapper {
        width: 56px;
        height: 56px;
        top: initial;
        right: 20px;
        bottom: 20px;
    }

    .ranking-section .ranking-section__item-img {
        width: 31px;
        height: 31px;
    }

    .ranking-section .ranking-section__button {
        font-size: 14px;
        padding-top: 10px;
    }
}

