.career-open-card {
    grid-template-areas:
        "top summary meta"
        "locale summary salary"
        "title summary actions";
}

.career-salary-card {
    grid-area: salary;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(255, 91, 98, 0.24);
    border-left: 4px solid #ff5b62;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 91, 98, 0.09), rgba(255, 255, 255, 0.98));
    box-shadow: 0 10px 24px rgba(255, 91, 98, 0.09);
}

.career-salary-card__label,
.career-detail-salary__label,
.history-salary__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a83d47;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.career-salary-card__amount,
.career-detail-salary__amount,
.history-salary__amount {
    color: #23344d;
    font-weight: 900;
    letter-spacing: 0;
}

.career-salary-card__amount {
    font-size: 1.03rem;
    line-height: 1.28;
}

.career-salary-card__period,
.career-detail-salary__period,
.history-salary__period {
    color: #69798d;
    font-size: 0.78em;
    font-weight: 800;
}

.career-salary-card__note {
    margin: 0;
    color: #66768a;
    font-size: 0.76rem;
    line-height: 1.4;
}

.career-detail-salary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon amount"
        "icon note";
    gap: 3px 14px;
    align-items: center;
    max-width: 610px;
    margin-top: 16px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 91, 98, 0.24);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255, 91, 98, 0.1), rgba(255, 255, 255, 0.98));
    box-shadow: 0 12px 30px rgba(255, 91, 98, 0.1);
}

.career-detail-salary__icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ff5b62;
    color: #fff;
    font-size: 1rem;
}

.career-detail-salary__label {
    grid-area: label;
}

.career-detail-salary__amount {
    grid-area: amount;
    font-size: 1.28rem;
    line-height: 1.25;
}

.career-detail-salary__note {
    grid-area: note;
    margin: 2px 0 0;
    color: #627287;
    font-size: 0.82rem;
    line-height: 1.42;
}

.history-item {
    grid-template-columns: 140px minmax(0, 1fr) minmax(165px, auto) auto auto;
}

.history-salary {
    display: grid;
    gap: 3px;
    min-width: 165px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 91, 98, 0.2);
    border-radius: 12px;
    background: rgba(255, 91, 98, 0.07);
}

.history-salary__amount {
    font-size: 0.86rem;
    line-height: 1.3;
    white-space: nowrap;
}

.history-item .history-salary__label {
    display: inline-flex;
    color: #a83d47;
    font-size: 0.7rem;
    line-height: 1.2;
}

.history-item .history-salary__amount {
    display: block;
    margin: 0;
    color: #23344d;
    font-size: 0.86rem;
    line-height: 1.3;
}

.history-item .history-salary__period {
    display: inline;
    color: #69798d;
    font-size: 0.78em;
    line-height: inherit;
}

@media (max-width: 1100px) {
    .career-open-card {
        grid-template-areas:
            "top top"
            "locale locale"
            "title title"
            "summary summary"
            "meta salary"
            "actions actions";
    }

    .career-open-card .active-vacancy-card__actions {
        justify-content: flex-start;
    }

    .history-item {
        grid-template-columns: 125px minmax(0, 1fr) minmax(160px, auto);
    }

    .history-country,
    .history-status {
        justify-self: start;
    }
}

@media (max-width: 820px) {
    .history-item {
        grid-template-columns: 1fr;
    }

    .history-salary {
        width: fit-content;
        min-width: min(230px, 100%);
    }
}

@media (max-width: 700px) {
    .career-salary-card {
        width: 100%;
        padding: 11px 12px;
    }

    .career-detail-salary {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 3px 11px;
        margin-top: 13px;
        padding: 13px 14px;
    }

    .career-detail-salary__icon {
        width: 38px;
        height: 38px;
    }

    .career-detail-salary__amount {
        font-size: 1.08rem;
    }

    .career-detail-salary__note {
        font-size: 0.78rem;
    }
}