/** @format */

.jobs_container {
	display: grid;
	justify-content: start;
	grid-template-columns: auto auto auto 1fr;
	padding: 0 var(--universal-gap);
	column-gap: var(--universal-gap);
	overflow-x: hidden;
}

@media (max-width: 1050px) {
	.jobs_container {
		grid-template-columns: auto 1fr;
	}
}

@media (max-width: 600px) {
	.jobs_container {
		grid-template-columns: 1fr;
	}
}

.jobs_container.hover_color--none {
	--hover-color: none;
}
.jobs_container.hover_color--main {
	--hover-color: var(--main-color);
}
.jobs_container.hover_color--spot {
	--hover-color: var(--spot-color);
}

.job_item {
	display: contents;
	width: 100%;
	text-decoration: none;
	position: relative;
}

.job_item * {
	position: relative;
}

.job_item .job_item__hover_element {
	position: relative;
}

.job_item .job_item__hover_element::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	left: -100vw;
	width: 300vw;
	height: 100%;
	background-color: var(--color-white);
	transition: all 300ms ease;
}

.job_item .job_item__hover_element * {
	z-index: 2;
	position: relative;
}

.job_item:hover .job_item__hover_element::before {
	background-color: var(--hover-color);
}

/* .job_item__hover_element {
	width: 100%;
	height: 0px;
	display: block;
	grid-column-start: 1;
	grid-column-end: -1;
	position: relative;
} */

/* .job_item__hover_element::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100px;
	height: 100px;
	background-color: blue;
} */

.jobs_more_button_wrapper {
	padding: var(--universal-gap) 0;
}

.job_item .job_item__title {
	padding: var(--universal-gap) 0;
	margin-bottom: 0px;
}

.job_item:first-child .job_item__title {
	border-top: 0;
}

.job_item .job_item__details {
	display: contents;
}

.job_item .job_item__field_detail {
	padding-bottom: var(--universal-gap);
}

.job_item .job_item__field_detail label {
	display: block;
}

.job_item .job_item__title,
.jobs_container .jobs_more_button_wrapper {
	grid-column-start: 1;
	grid-column-end: -1;
}

/*Hover Pseudo Element*/

/*Create Border between Items*/
.jobs_container .job_item__line_above {
	position: relative;
}

.jobs_container .job_item:first-child .job_item__line_above,
.jobs_container .job_item:first-child .job_item__line_above::after {
	border-top: 0;
}

.jobs_title {
	padding: 0px var(--universal-gap);
}