.single-job {
	position: relative;
	display: grid;
	padding: 20px;
	
	background-color: #FFF; transition: background-color .2s ease-out;
	border-radius: 30px;
	
	color: #000;
	
	isolation: isolate;
}
.single-job:hover { background-color: #D5ED99; }
@container (min-width: 650px) {
	.single-job {
		grid-template-areas:
			"illustration	.		cta"
			"illustration	title	cta"
			"illustration	summary	cta"
			"illustration	tags	cta"
			"illustration	.		cta";
		grid-template-columns: 200px auto 50px;
		grid-template-rows: 0px auto 1fr auto 0px;
		column-gap: 30px;
		row-gap: 15px;
	}
}
@container (max-width: 649.99px) {
	.single-job {
		grid-auto-rows: auto;
		column-gap: 30px;
		row-gap: 20px;
	}
	@container (min-width: 400px) {
		.single-job {
			grid-template-areas:
				"illustration	title	title"
				"summary		summary	summary"
				"tags			tags	cta";
			grid-template-columns: 150px auto 50px;
		}
	}
	@container (max-width: 399.99px) {
		.single-job {
			grid-template-areas:
				"illustration	illustration"
				"title			title"
				"summary		summary"
				"tags			cta";
			grid-template-columns: 1fr;
		}
	}
}

/*---------------------------------------------------------------*/

.single-job > .illustration {
	grid-area: illustration;
	align-self: stretch;
	
	position: relative;
	width: 100%; overflow: hidden;
	
	border-radius: 20px;
}
.single-job > .illustration:before {
	content: '';
	display: block;
	padding-top: 100%;
}
.single-job > .illustration > .media-element {
	position: absolute; top: 0; left: 0;
}

/*---------------------------------------------------------------*/

.single-job > .title {
	grid-area: title;
	align-self: center;
	
	max-width: 100%; overflow: hidden;
	margin: 0;
	
	font-size: 26px;
	font-weight: 500;
}

/*---------------------------------------------------------------*/

.single-job > .summary {
	grid-area: summary;
	display: -webkit-box; overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 0;
	
	font-size: 15px;
	font-weight: 500;
}

/*---------------------------------------------------------------*/

.single-job > .tags {
	grid-area: tags;
	align-self: center;
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	column-gap: 5px;
	row-gap: 5px;
}
.single-job > .tags > .tag {
	padding: 0 15px;
	
	border-radius: 25px;
	border: solid 1px #000;
	
	white-space: nowrap;
	
	text-align: center;
	line-height: 25px;
	font-size: 12px;
	font-weight: 500;
	color: #000;
}

/*---------------------------------------------------------------*/

.single-job > .apply-btn {
	grid-area: cta;
	align-self: center;
	justify-self: flex-end;
	
	position: relative;
	display: block; height: 50px; width: 50px;
	
	background-color: #1C3558;
	border-radius: 25px;
}
.single-job > .apply-btn:before {
	content: '';
	position: absolute; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	
	background-color: #FFF;
	
	--mask-image: url("../../images/icons/cta-arrow.svg");
	--mask-repeat: no-repeat;
	--mask-position: center;
	--mask-size: 50%;
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
}
.single-job > .apply-btn > .label {
	position: absolute; top: 0; right: 45px; transform: translateX(20px);
	display: flex; height: 100%; width: auto;
	justify-content: center;
	align-items: center;
	padding: 0 25px;
	
	background-color: inherit;
	border-radius: 25px;
	
	white-space: nowrap;
	text-align: center;
	font-size: 22px;
	font-weight: 500;
	color: #FFF;
	
	opacity: 0;
	pointer-events: none;
	
	transition:
		transform .2s ease-out,
		opacity	  .2s ease-out;
}
.single-job > .apply-btn:hover > .label {
	transform: translateX(0);
	opacity: 1;
}

/*---------------------------------------------------------------*/