:root {
    --text-secondary-color: #686868;
    --bg-secondary-color: #E5F0F7;
    --bg-shade-color: #D9D9D9;
    --bg-selection-hover-color: #f3f8fa;

    --filter-dropdown-border-radius: 10px;
    --filter-popup-border-radius: 10px;

    --filter-width: 300px;
}

.career-vacancies {
    margin: 0 0 var(--size-5);
    display: grid;
    grid-template-areas:
                "search-area search-area"
                "filter-area news-area";
    grid-template-columns: var(--filter-width) 1fr;
    width: 100%;
    column-gap: var(--size-3);
    row-gap: var(--size-4);
}

.career-vacancies-search-wrapper {
    grid-area: search-area;
    width: 100%;
}

.career-vacancies-filter-wrapper {
    width: var(--filter-width);
    flex: 0 0 var(--filter-width);
}

.career-vacancies-news-wrapper {
    grid-area: news-area;
    width: 100%;
}

@media (max-width: 700px) {
    .career-vacancies {
        margin: 0 0 var(--size-3);
        grid-template-areas:
                    "search-area"
                    "filter-area"
                    "news-area";
        grid-template-columns: 1fr;
    }
    .career-vacancies-filter-wrapper {
        width: 100%;
    }
    .career-vacancies-news-wrapper {
        width: 100%;
    }
}