.vacancy-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1.5 * var(--su)));
    padding: max(1rem, calc(1.5 * var(--su))) max(1.5rem, calc(2 * var(--su)));
    background: #FBFBF8;
    transition: background-color .3s ease-in-out;
}

.vacancy-card:hover, .vacancy-card:active {
    background-color: var(--purdey-sand-100);
}

.vacancy-card .status, .vacancy-card .title-meta-wrapper .meta-wrapper {
    font-size: var(--scaling-label);
    font-weight: 400;
}

.vacancy-card .status {
    padding-left: max(.75rem, calc(.75 * var(--su)));
    display: flex;
    align-items: center;
    gap: max(.25rem, calc(.25 * var(--su)));
}

.vacancy-card .status::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: max(.375rem, calc(.375 * var(--su)));
    aspect-ratio: 1;
    background-color: #73AE81;
    transform: translate(0%, 2px);
    border-radius: 50%;
}

.vacancy-card .title-meta-wrapper {
    display: flex;
    flex-direction: column;
    gap: max(.75rem, calc(.75 * var(--su)));
}

.vacancy-card .title-meta-wrapper .meta-wrapper {
    display: flex;
    align-items: center;
    gap: max(1rem, calc(1.5 * var(--su)));
}

.vacancy-card .cta {
    font-family: var(--scaling-button);
    text-transform: uppercase;
    font-weight: 400;
}