/**
 * Layout: Vacature - Overzicht
 * Slug: vacature_overview
 */

.vacature_overview-layout {
	position: relative;
	z-index: 10;
    padding-top: var(--pk-hero-top-spacing);
	background-color: #ffffff;
	padding-bottom: max(2rem, calc(5 * var(--su)));
	border-radius: 2rem;
}

.vacature_overview-layout .posts-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: max(2rem, calc(3.5 * var(--su)));
}
.vacature_overview-layout .vacature-item {
	display: flex;
	align-items: center;
	gap: max(1rem, calc(2 * var(--su)));
	padding: max(1rem, calc(1.25 * var(--su)))
	max(1.25rem, calc(1.5 * var(--su)));
	border: 1px solid rgba(10, 55, 124, 0.10);
	border-radius: 1.5rem;
	border-bottom-left-radius: 0;
}
.vacature_overview-layout .vacature-item svg {
	flex-shrink: 0;
}
.vacature_overview-layout .vacature-item .vacature-title {
	margin-right: auto;
	font-size: max(1rem, calc(1.125 * var(--su)));
}
.vacature_overview-layout .vacature-item .vacature-tax {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.vacature_overview-layout .vacature-item .vacature-vacature_regio {
	background-color: #F4F7FC;
	padding: 0.75em 1em;
	border-radius: 100px;
	min-width: 180px;
	
}
.vacature_overview-layout .vacature-item .vacature-vacature_regio::before {
	content: '';
	width: 0.75em;
	aspect-ratio: 1;
	border-radius: 100%;
	display: block;
	background-color: var(--dia-blue-logo);
}

.vacature_overview-layout .vacature-item .pk-button-group {
	margin-top: 0;
}

@media screen and (max-width: 992px) {
	.vacature_overview-layout .vacature-item {
		flex-wrap: wrap;
	}
	.vacature_overview-layout .vacature-item .vacature-tax {
		width: 100%;
	}
	.vacature_overview-layout .vacature-item .pk-button-group,
	.vacature_overview-layout .vacature-item .pk-button {
		width: 100%;
	}
}