/***************************************
* Job item
***************************************/
.bb-jobs-item {
    --size-image:314px;
    border-radius:var(--bb-radius);
}

/* column */
@media only screen and (min-width:768px) {
    .bb-jobs-item__thumbnail {width:var(--size-image);}
    .bb-jobs-item__info {width:calc(100% - var(--size-image));}
}

/* image */
.bb-jobs-item__thumbnail {aspect-ratio:304/369; transform:translate(0);}
.bb-jobs-item__thumbnail:before {
    z-index:1; background:rgba(0, 0, 0, 0); border:3px solid rgba(0, 0, 0, 0); border-radius:var(--bb-radius);
    transition:background .3s ease;
}
.bb-jobs-item__thumbnail img {transition:transform .3s ease;}
.bb-jobs-item__thumbnail:hover:before {background:rgba(0, 0, 0, .3);}
.bb-jobs-item__thumbnail:hover img {transform:scale(1.02);}
.bb-jobs-item__thumbnail:focus-visible {border-radius:var(--bb-radius); outline:0;}
.bb-jobs-item__thumbnail:focus-visible:before {border-color:var(--bb-color-yellow);}

/* info */
.bb-jobs-item__info {
    --spacing-left:clamp(var(--bb-gap-container), 80px, var(--bb-gap-side));
    padding:var(--bb-spacing-40) var(--bb-gap-container) var(--bb-spacing-40) var(--spacing-left);
}
.bb-jobs-item__title {--bb-spacing-heading:4px;}
.bb-jobs-item__title:hover {--bb-color-heading:var(--bb-color-yellow);}


/***************************************
* Vacature item - Responsive
***************************************/
@media only screen and (max-width:1024px) {
    .bb-jobs-item {--size-image:275px;}
}