.vacatures_overzicht .vacatures_lijst {
    display: grid;
    gap: calc(var(--bs-gutter-x) / 2);
}

.vacatures_overzicht .vacatures_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bs-gutter-x);
    padding: var(--bs-gutter-x);
    background: var(--beige);
    color: var(--zwart);
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.vacatures_overzicht .vacatures_item:is(:hover, :focus-visible) {
    background-color: var(--bruin50);
    color: var(--groen);
}

.vacatures_overzicht .vacatures_inhoud {
    min-width: 0;
    display: grid;
    gap: calc(var(--bs-gutter-x) / 6);
    hyphens: auto;
}

.vacatures_overzicht .vacatures_inhoud h2 {
    line-height: 1;
}

.vacatures_overzicht .vacatures_kenmerken {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--bs-gutter-x) / 6) calc(var(--bs-gutter-x) / 2);
    /* Figma zwart75: the existing ink mixed with 25% white. */
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
}

.vacatures_overzicht .vacatures_item:is(:hover, :focus-visible) .button {
    background-color: var(--_bg-hover);
    border-color: var(--_border-hover);
    color: var(--_text-hover);
}

.vacatures_overzicht .vacatures_item:focus-visible {
    outline: 0.2rem solid var(--groen);
    outline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
    .vacatures_overzicht .vacatures_item {
        transition: none;
    }
}

@media (max-width:767px) {
    .vacatures_overzicht .vacatures_item {
        flex-direction: column;
        align-items: flex-start;
        gap: calc(var(--bs-gutter-x) / 2);
    }
}