.cost__inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.cost__info {
    max-width: 75rem;
    width: 100%;
}

.cost__title {
    max-width: 55rem;
    width: 100%;
}

.cost__text {
    color: #666666;
}

.cost__text strong {
    font-weight: 500;
    color: #0f9aff;
}

.cost__diagram {
    flex: 0 0 auto;
    max-width: 100%;
    text-align: right;
}

.cost__diagram-image {
    margin-right: 2rem;
    padding-right: 5rem;
}

.cost__diagram-num {
    color: #0f9aff;
}

#cost_path {
    transform: translate(-100%, 100%);
    transition: transform 2s ease-out;
}

.cost.filled #cost_path {
    transform: translate(0, 0);
}

/* media queries START */
@media (max-width: 1024.9px) {
    .cost__diagram {
        width: 32rem;
    }
}

@media (max-width: 767.9px) {
    .cost__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 6rem;
    }

    .cost__diagram {
        width: 21rem;
        margin: 0 auto;
    }

    .cost__diagram-image {
        margin-right: 0;
        padding-right: 0;
    }

    .cost__diagram-num {
        margin-bottom: -2rem;
        font-size: 2.4rem;
        margin-right: -3.2rem;
    }
}
/* media queries END */