.salary-chart-card {
    display: grid;
    grid-template-columns: minmax(10rem, 12rem) 1fr;
    gap: var(--s-sm);
}

.salary-chart-wrap {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
}

.salary-chart {
    --liquido-start: 0%;
    --liquido-end: 100%;
    --inss-start: 100%;
    --inss-end: 100%;
    --irrf-start: 100%;
    --irrf-end: 100%;
    --vt-start: 100%;
    --vt-end: 100%;

    width: min(11rem, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1rem;
    background:
        conic-gradient(
            var(--clr-c-prov) var(--liquido-start) var(--liquido-end),
            var(--clr-c-desc) var(--inss-start) var(--inss-end),
            var(--clr-c-desc2) var(--irrf-start) var(--irrf-end),
            var(--clr-c-ben) var(--vt-start) var(--vt-end),
            var(--clr-c-ben) var(--vt-end) 100%
        );
    transition: background .25s ease-out;
}

.cost-chart {
    --encargos-start: 0%;
    --encargos-end: 100%;
    --provisoes-start: 100%;
    --provisoes-end: 100%;
    --beneficios-start: 100%;
    --beneficios-end: 100%;


    width: min(11rem, 90%);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1rem;
    background:
        conic-gradient(
            var(--clr-c-prov) var(--encargos-start) var(--encargos-end),
            var(--clr-c-desc) var(--provisoes-start) var(--provisoes-end),
            var(--clr-c-ben) var(--beneficios-start) var(--beneficios-end)
        );
    transition: background .25s ease-out;
}

.pj-chart {
    --liquido-start: 0%;
    --liquido-end: 100%;
    --imposto-start: 100%;
    --imposto-end: 100%;



    width: min(11rem, 90%);
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1rem;
    background:
        conic-gradient(
            var(--clr-c-prov) var(--liquido-start) var(--liquido-end),
            var(--clr-c-desc) var(--imposto-start) var(--imposto-end)
        );
    transition: background .25s ease-out;
}

.salary-chart-center {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--clr-bg-base);
    border: 1px solid var(--clr-bg-elevated);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-sm);
    text-align: center;
}

.salary-chart-center span,
.salary-chart-item p {
    color: var(--clr-text-muted);
}

.salary-chart-center strong {
    font-family: var(--montSerrat-semibold);
    font-size: var(--f-lg);
    color: var(--clr-text-primary);
}

.salary-chart-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: var(--w-lg);
}

.salary-chart-info h3 {
    margin-bottom: var(--s-sm);
    color: var(--clr-text-primary);
}

.salary-chart-item {
    display: grid;
    grid-template-columns: 1rem 10rem 6.5rem 4rem;
    align-items: center;
    gap: var(--s-md);
    min-height: 2.4rem;
}

.salary-chart-item strong,
.salary-chart-percent {
    color: var(--clr-text-primary);
    font-family: var(--goog-semibold);
}

.salary-chart-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
}

.chart-prov { background-color: var(--clr-c-prov); }
.chart-desc { background-color: var(--clr-c-desc); }
.chart-desc2 { background-color: var(--clr-c-desc2); }
.chart-ben { background-color: var(--clr-c-ben); }

@media (max-width: 760px) {
    .salary-chart-card {
        grid-template-columns: 1fr;
        gap: var(--s-md);
        width: 100%;
    }

    .salary-chart-wrap {
        min-height: 12rem;
    }

    .salary-chart {
        width: min(12rem, 100%);
    }
    .salary-chart-info {
        width: 100%;
    }

    .salary-chart-item {
        width: 100%;
        grid-template-columns: .6rem 9rem auto auto;
        justify-content: center;
    }

    .salary-chart-dot {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
    }

    .cost-chart{
        padding: .6rem;
    }

}