.vacature_content .vacature_content_row{
    row-gap: var(--default-margin-bottom);
}

.vacature_content .tussenruimte_6{
    --bs-gutter-x: var(--spacing_6);
}

.vacature_content .tussenruimte_8{
    --bs-gutter-x: var(--spacing_8);
}

.vacature_content .tussenruimte_10{
    --bs-gutter-x: var(--spacing_10);
}

.vacature_content .vacature_content_kaart{
    position: sticky;
    top: calc(var(--body-padding) + var(--spacing_6) / 2);
    /* Keep tall cards reachable beneath the fixed navigation, also at browser zoom. */
    max-height: calc(100dvh - var(--body-padding) - var(--spacing_6));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--default-margin-bottom);
    padding: calc(var(--spacing_6) / 2);
    background: var(--beige);
    color: var(--zwart);
    hyphens: auto;
}

.vacature_content .vacature_content_kaart h2{
    color: var(--zwart);
}

.vacature_content .vacature_content_subtekst,
.vacature_content .vacature_content_kenmerken dt{
    color: color-mix(in srgb, var(--zwart) 75%, var(--wit));
}

.vacature_content .vacature_content_kenmerken{
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing_6) / 4);
    margin: 0;
}

.vacature_content .vacature_content_kenmerken > div{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: calc(var(--spacing_6) / 4);
}

.vacature_content .vacature_content_kenmerken dt{
    font-weight: 300;
}

.vacature_content .vacature_content_kenmerken dd{
    margin: 0;
    text-align: right;
    font-weight: 500;
}

.vacature_content .vacature_content_contact{
    /* Figma's one-pixel divider separates the contact details from the application. */
    border-top: 0.1rem solid color-mix(in srgb, var(--zwart) 50%, var(--wit));
    padding-top: calc(var(--spacing_6) / 4);
}

.vacature_content .vacature_content_persoon{
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing_6) / 12);
    margin-top: calc(var(--spacing_6) / 6);
}

.vacature_content .vacature_content_contact a{
    text-decoration: none;
}

.vacature_content .vacature_content_contact a:is(:hover, :focus-visible){
    text-decoration: underline;
}

.vacature_content .vacature_content_kaart:focus-visible{
    outline: 0.2rem solid var(--groen);
    outline-offset: 0.2rem;
}

/* Expanded frame wrappers must not create a scrolling ancestor for the sticky card. */
.vacature_content:is(.links_uitbreiden, .rechts_uitbreiden){
    overflow: clip;
}

@media (max-width:767px){
    .vacature_content .vacature_content_kaart{
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

@media (min-width:768px) and (max-width:991px){
    .vacature_content .vacature_content_kaart{
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}