.ensivia-vacature-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 16px 0 16px 16px;
    transition: box-shadow 0.25s ease;
}

.ensivia-vacature-card .vc-image {
    display: block;
    width: 100%;
    aspect-ratio: 455 / 435;
    border-radius: 16px 0 16px 16px;
    overflow: hidden;
}

.ensivia-vacature-card .vc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.ensivia-vacature-card .vc-content {
    position: relative;
    z-index: 1;
    margin-top: -25%;
    margin-left: max(2rem, calc(2 * var(--su)));
    margin-right: max(2rem, calc(2 * var(--su)));
    background: var(--color-midnight-blue);
    padding: max(1.5rem, calc(2 * var(--su))) max(1.5rem, calc(2 * var(--su)));
    display: flex;
    flex-direction: column;
    gap: max(0.75rem, calc(0.75 * var(--su)));
    border-radius: 16px 0 16px 16px;
}

.ensivia-vacature-card .vc-titel {
    margin: 0;
    color: var(--color-white);
    font-family: Urbanist;
    font-size: max(1.5rem, calc(1.5 * var(--su)));
    font-weight: 600;
    line-height: 1.2;
    text-transform: unset;
}

.ensivia-vacature-card .vc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin:10px 0px;
}

.ensivia-vacature-card .vc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: var(--color-white);
    color: var(--color-midnight-blue);
    font-size: max(0.6875rem, calc(0.8125 * var(--su)));
    font-weight: 700;
    line-height: 1;
    padding: max(0.375rem, calc(0.375 * var(--su))) max(0.625rem, calc(0.625 * var(--su)));
    border-radius: 4px 0 4px 4px;
    text-transform: uppercase;
    font-family: "korolev", sans-serif;
    white-space: nowrap;
}

.ensivia-vacature-card .vc-badge svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.ensivia-vacature-card .vc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-bright-yellow);
    font-size: max(0.875rem, calc(1 * var(--su)));
    font-weight: 500;
    line-height: 1;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.ensivia-vacature-card:hover .vc-link {
    gap: 0.625rem;
}
