#container > main {
	position: relative;
	padding-top: 500px;
	
	isolation: isolate;
}
@media (min-width: 900px)	 { #container > main { margin-bottom: 100px; } }
@media (max-width: 899.99px) { #container > main { margin-bottom: 75px; } }

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

#container > main > .cover {
	position: absolute; top: 0; left: 0; z-index: -1;
	height: 650px; width: 100%; overflow: hidden;
	margin-bottom: -150px;
	
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	
	--mask-image: linear-gradient(to top, transparent, #000 150px);
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
#container > main > .cover:after {
	content: '';
	position: absolute; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	
	background-image: linear-gradient(to top, rgba(0,0,0,.4), transparent 75%);
	
	pointer-events: none;
}

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

#container > main > .content-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
	grid-auto-row: auto;
	column-gap: 30px;
	row-gap: 30px;
	
	filter: drop-shadow(0 0 20px rgba(0,0,0,.2));
}
#container > main > .content-wrapper > .column {
	flex: 1 1 calc((100% - 20px) / 2);
	display: flex;
	flex-direction: column;
	row-gap: 30px;
}

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

#container > main > .content-wrapper > .column > .job-offer-element {
	padding: 40px 30px;
	
	background-color: #FFF;
	border-radius: 30px;
	
	font-size: 16px;
	color: #120404;
}

#container > main > .content-wrapper > .column > .job-offer-element > h1 {
	margin: 0;
	
	line-height: 100%;
	font-size: 40px;
	font-weight: 500;
}
#container > main > .content-wrapper > .column > .job-offer-element > h2 {
	margin: 0 0 25px;
	
	font-size: 32px;
	font-weight: 600;
}
#container > main > .content-wrapper > .column > .job-offer-element > h3 {
	margin: 30px 0 20px;
	
	font-size: 18px;
	font-weight: 600;
}

#container > main > .content-wrapper > .column > .job-offer-element ul {
	list-style: none;
	--padding: 35px;
	padding: 0;
}
#container > main > .content-wrapper > .column > .job-offer-element ul > li {
	position: relative;
	padding-left: var(--padding);
}
#container > main > .content-wrapper > .column > .job-offer-element ul > li:before {
	content: '•';
	position: absolute; left: 0;
	display: inline-block; width: var(--padding);
	text-align: center;
}

#container > main > .content-wrapper > .column > .job-offer-element li,
#container > main > .content-wrapper > .column > .job-offer-element p { line-height: 130%; }
#container > main > .content-wrapper > .column > .job-offer-element li:not(:last-child) { margin-bottom: 5px; }

#container > main > .content-wrapper > .column > .job-offer-element ul,
#container > main > .content-wrapper > .column > .job-offer-element p { margin: 20px 0; }
#container > main > .content-wrapper > .column > .job-offer-element ul:last-child,
#container > main > .content-wrapper > .column > .job-offer-element p:last-child { margin-bottom: 0; }

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

#container > main > .content-wrapper > .column > .job-offer-element.header {
	display: grid;
	grid-template-areas:
		"title			title"
		"tags			tags"
		"illustration	summary";
	grid-template-columns: 125px auto;
	grid-template-rows: auto auto 125px;
	column-gap: 30px;
	row-gap: 30px;
	padding-bottom: 30px;
	
	background-color: #D5ED99;
}
#container > main > .content-wrapper > .column > .job-offer-element.header > .title {
	grid-area: title;
	margin-bottom: 0;
}

#container > main > .content-wrapper > .column > .job-offer-element.header > .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;
}
#container > main > .content-wrapper > .column > .job-offer-element.header > .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;
}

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

#container > main > .content-wrapper > .column > .job-offer-element.header > .summary {
	grid-area: summary;
	height: 100%; width: 100%; overflow: auto;
	
	--mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
}
#container > main > .content-wrapper > .column > .job-offer-element.header > .summary > .scrollable {
	display: flex; min-height: 100%;
	flex-direction: column;
	justify-content: center;
	row-gap: 10px;
	padding: 20px 0;
	
	font-weight: 500;
}
#container > main > .content-wrapper > .column > .job-offer-element.header > .summary > .scrollable p { margin: 0; }

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

#container > main > .content-wrapper > .column > .job-offer-element.profile { background-color: #C9DDE9; }
#container > main > .content-wrapper > .column > .job-offer-element.skills { background-color: #3A4A65; color: #FFF; }

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

#container > main > .content-wrapper > .column > .application {
	position: relative;
	overflow: hidden;
	
	background-image: linear-gradient(to bottom, #2C405E, #637990);
	
	color: #FFF;
	
	isolation: isolate;
}
@media (max-width: 785.99px) { #container > main > .content-wrapper > .column > .application { order: 1; } }

#container > main > .content-wrapper > .column > .application .fields {
	row-gap: 20px;
}
#container > main > .content-wrapper > .column > .application .fields > .field {
	padding: 0;
	border: none;
}
#container > main > .content-wrapper > .column > .application .fields > .field > .error { color: #FF9C9C; }
#container > main > .content-wrapper > .column > .application .fields > .field > .field-label {
	font-size: 16px;
	font-weight: 500;
}
#container > main > .content-wrapper > .column > .application .fields > .field > .input {
	height: 40px;
	padding: 0 8px;
	
	background-color: rgba(50,70,99,.3);
	border: solid 1px rgba(255,255,255,.2);
	border-radius: 6px;
	
	font-size: 16px;
	font-weight: 400;
	color: #FFF;
}
#container > main > .content-wrapper > .column > .application .fields > .field > textarea.input {
	height: 150px;
	padding: 8px;
}

#container > main > .content-wrapper > .column > .application .fields > .upload > .uploadbox > label {
	padding: 0;
	
	background-color: #FFF;
	border-radius: 20px;
	
	text-align: center;
	line-height: 40px;
	font-weight: 500;
	color: #000;
	
	transition: background-color .2s ease-out;
}
#container > main > .content-wrapper > .column > .application .fields > .upload > .uploadbox > label:hover { background-color: #D5ED99; }
#container > main > .content-wrapper > .column > .application .fields > .upload > .uploadbox > label:before { content: none; }

#container > main > .content-wrapper > .column > .application .fields > .checkbox { margin: 0; }

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

#container > main > .content-wrapper > .column > .card {
	position: relative;
	overflow: hidden;
	
	border-radius: 30px;
	box-shadow: 0 0 10px rgba(0,0,0,.2);
	
	isolation: isolate;
}
#container > main > .content-wrapper > .column > .card:before {
	content: '';
	position: relative; z-index: 1;
	display: block; width: 210px;
	padding-top: 160%;
	margin: 35px auto;
	
	background-color: #FFF;
	
	--mask-image: url("../../images/logo.svg");
	--mask-position: top 35px center;
	--mask-repeat: no-repeat;
	--mask-size: 210px auto;
	
	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
	
	pointer-events: none;
}
#container > main > .content-wrapper > .column > .card > .background {
	position: absolute; top: 0; left: 0; z-index: -1;
	height: 100%; width: 100%;
}
#container > main > .content-wrapper > .column > .card > .overlay {
	position: absolute; bottom: 0; left: 0;
	display: flex; max-height: 100%; width: 100%;
	flex-direction: column;
	justify-content: flex-end;
	row-gap: 25px;
	
	--padding-top: 100px;
	padding: var(--padding-top) 25px 35px;
	
	background-image: linear-gradient(to top, rgba(0,0,0,.3) calc(100% - var(--padding-top) + 35px), transparent);
	
	text-align: center;
	color: #FFF;
	
	pointer-events: none;
}
#container > main > .content-wrapper > .column > .card > .overlay:empty { display: none; }
#container > main > .content-wrapper > .column > .card > .overlay * { margin: 0; }
#container > main > .content-wrapper > .column > .card > .overlay > .title {
	line-height: 100%;
	font-size: 20px;
	font-weight: 500;
}
#container > main > .content-wrapper > .column > .card > .overlay > .title:before { content: open-quote ' '; }
#container > main > .content-wrapper > .column > .card > .overlay > .title:after { content: ' ' close-quote; }
#container > main > .content-wrapper > .column > .card > .overlay > .cta-btn {
	align-self: center;
	pointer-events: auto;
}
@media (max-width: 785.99px) { #container > main > .content-wrapper > .column > .card { order: 2; } }