.flex-layout.vacancy_grid .intro-col {
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1 * var(--su)));
}

.flex-layout.vacancy_grid .intro-col .subtitle {
    font-weight: 400;
    font-size: var(--scaling-body-bold);
}

.flex-layout.vacancy_grid .filters {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: max(1rem, calc(1 * var(--su)));
    height: 64px;
    border: 1px solid rgba(0, 48, 46, 0.10);
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.04);
    padding-inline: max(2rem, calc(2 * var(--su))) max(.75rem, calc(.75 * var(--su)));;
}

.flex-layout.vacancy_grid .filters .filter-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: max(.5rem, calc(.5 * var(--su)));
    background-color: var(--purdey-white-100);
    /* padding-inline: max(.75rem, calc(.75 * var(--su))); */
}

.flex-layout.vacancy_grid .filters .filter-item:not(:last-of-type)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: calc(-1 * max(.5rem, calc(.5 * var(--su))));
    translate: 0 -50%;
    width: 1px;
    height: 80%;
    background: rgba(0, 48, 46, 0.10);
}

.flex-layout.vacancy_grid .filters .filter-item::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: max(1.25rem, calc(1.25 * var(--su)));
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
}

.flex-layout.vacancy_grid .filters .filter-location::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3327 6.66732C13.3327 9.99598 9.64002 13.4627 8.40002 14.5333C8.2845 14.6202 8.14388 14.6672 7.99935 14.6672C7.85482 14.6672 7.7142 14.6202 7.59868 14.5333C6.35868 13.4627 2.66602 9.99598 2.66602 6.66732C2.66602 5.25283 3.22792 3.89628 4.22811 2.89608C5.22831 1.89589 6.58486 1.33398 7.99935 1.33398C9.41384 1.33398 10.7704 1.89589 11.7706 2.89608C12.7708 3.89628 13.3327 5.25283 13.3327 6.66732Z' stroke='%23001325' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.99935 8.66732C9.10392 8.66732 9.99935 7.77189 9.99935 6.66732C9.99935 5.56275 9.10392 4.66732 7.99935 4.66732C6.89478 4.66732 5.99935 5.56275 5.99935 6.66732C5.99935 7.77189 6.89478 8.66732 7.99935 8.66732Z' stroke='%23001325' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.flex-layout.vacancy_grid .filters .filter-function::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00065 8.00065H8.00732M10.6673 4.00065V2.66732C10.6673 2.3137 10.5268 1.97456 10.2768 1.72451C10.0267 1.47446 9.68761 1.33398 9.33398 1.33398H6.66732C6.3137 1.33398 5.97456 1.47446 5.72451 1.72451C5.47446 1.97456 5.33398 2.3137 5.33398 2.66732V4.00065M14.6673 8.66732C12.6892 9.9733 10.371 10.6695 8.00065 10.6695C5.63029 10.6695 3.31212 9.9733 1.33398 8.66732M2.66732 4.00065H13.334C14.0704 4.00065 14.6673 4.5976 14.6673 5.33398V12.0007C14.6673 12.737 14.0704 13.334 13.334 13.334H2.66732C1.93094 13.334 1.33398 12.737 1.33398 12.0007V5.33398C1.33398 4.5976 1.93094 4.00065 2.66732 4.00065Z' stroke='%23001325' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.flex-layout.vacancy_grid .filters .filter-employment_type::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_100_283)'%3E%3Cpath d='M7.99967 3.99967V7.99967L10.6663 9.33301M14.6663 7.99967C14.6663 11.6816 11.6816 14.6663 7.99967 14.6663C4.31778 14.6663 1.33301 11.6816 1.33301 7.99967C1.33301 4.31778 4.31778 1.33301 7.99967 1.33301C11.6816 1.33301 14.6663 4.31778 14.6663 7.99967Z' stroke='%23001325' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_100_283'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.flex-layout.vacancy_grid .filters select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    /* padding-block: max(.5rem, calc(.5 * var(--su))); */
    padding-right: max(2rem, calc(2 * var(--su)));
    line-height: 1;
    font-weight: 500;
    translate: 0 -3px;
    font-size: var(--scaling-button);
    font-family: var(--pk-text-font-family);
    background-repeat: no-repeat;
    background-position: 100% calc(50% + 3px);
    background-size: max(1.25rem, calc(1.25 * var(--su)));
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9L10 14L15 9' stroke='%23001325' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.flex-layout.vacancy_grid .filters select:focus-visible {
    outline: none;
}

.flex-layout.vacancy_grid .filters .vacancy-search-btn {
    margin-left: auto;
    flex-shrink: 0;
    cursor: pointer;
    width: max(2rem, calc(2.5 * var(--su)));
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background-color: var(--purdey-sand-100);
    background-repeat: no-repeat;
    background-position: center;
    background-size: max(1.25rem, calc(1.25 * var(--su)));
    background-image: url("data:image/svg+xml,%3Csvg width='23' height='23' viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.444 19.444L15.4255 15.4255M17.5922 10.1848C17.5922 14.2757 14.2757 17.5922 10.1848 17.5922C6.09375 17.5922 2.77734 14.2757 2.77734 10.1848C2.77734 6.09375 6.09375 2.77734 10.1848 2.77734C14.2757 2.77734 17.5922 6.09375 17.5922 10.1848Z' stroke='%23FFFFFE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.flex-layout.vacancy_grid .vacancy-results {
    margin-top: max(1rem, calc(1 * var(--su)));
    transition: opacity 0.3s ease-in-out;
}

.flex-layout.vacancy_grid .vacancy-results.ajax-loading {
    opacity: 0.5;
    pointer-events: none;
}