/* Job Intro */
.job-intro .back-btn {
    grid-area: 1/3/1/span 7;
    margin: max(48px, 3.75vw) 0;
}

.job-intro .job-title {
	grid-area: 2/3/2/span 7;
	margin-bottom: max(32px, 2.5vw);
	text-wrap: balance;
}

.job-intro .job-start {
    grid-area: 3/3/3/span 4;
}

.job-intro .apply-now {
	grid-area: 3/7/3/span 3;
	justify-self: flex-end;
	align-self: center;
}

.job-intro .job-img-lg {
    grid-area: 1/10/span 4/span 5;
	width: calc(100% - max(64px, 5.3125vw));
    margin-left: max(64px, 5.3125vw);
    aspect-ratio: 746/1250;
}

.job-intro .content-box {
    grid-area: 4/4/span 2/span 11;
    grid-template-rows: subgrid;
}

.job-intro .content-box .job-img-sm {
    grid-area: 1/1/1/span 4;
    aspect-ratio: 740/576;
}

.job-intro .content-box .job-infos {
    grid-area: 1/5/1/span 2;
    margin-top: max(48px, 3.75vw);
    gap: max(20px, 1.875vw);
}

.job-intro .content-box .job-infos .job-detail {
    display: flex;
    align-items: center;
    gap: max(24px, 2.5vw);
}

.job-intro .content-box .job-infos .job-detail::before {
    content: "";
    display: block;
    width: max(32px, 1.875vw);
    aspect-ratio: 1/1;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background: currentColor;
    flex: 0 0 auto;
}

.job-intro .content-box .job-infos .job-detail.location::before {
    mask-image: url(../../img/icon-location.svg);
    -webkit-mask-image: url(../../img/icon-location.svg);
}

.job-intro .content-box .job-infos .job-detail.employment-type::before {
    mask-image: url(../../img/icon-clock.svg);
    -webkit-mask-image: url(../../img/icon-clock.svg);
}

.job-intro .content-box .job-infos .job-detail.experience::before {
    mask-image: url(../../img/icon-person.svg);
    -webkit-mask-image: url(../../img/icon-person.svg);
}

.job-intro .content-box .job-description {
    grid-area: 2/3/2/span 6;
    margin-top: max(32px, 2.5vw);
}

/* Job Tasks */
.job-tasks .headline {
	grid-area: 1/3/1/span 3;
	margin-top: 0;
}

.job-tasks .tasks-accordion {
    grid-area: 1/6/1/span 6;
}

.job-tasks .apply-now {
    grid-area: 2/6/2/span 6;
    margin-top: max(48px, 3.75vw);
    justify-self: flex-end;
}

/* Job Requirements */
.job-requirements .headline {
    grid-area: 1/3/1/span 3;
    margin-top: 0;
}

.job-requirements .requirements-list {
    grid-area: 1/6/1/span 6;
    column-count: 2;
    column-gap: max(32px, 3.125vw);
    margin: 0;
    padding: 0;
    padding-left: 1em;
	line-height: 1.5;
	letter-spacing: .02em;
	list-style: none;
	padding-left: 0;
}

.job-requirements .requirements-list li {
    display: flex;
    padding: .4em 0;
	break-inside: avoid;
	min-height: max(32px, 1.5625vw);
	margin-bottom: 1em;
    font-size: 1.2rem;
    font-weight: 500;
}

.job-requirements .requirements-list li:not(:last-child) {
    margin-bottom: max(24px, 1.25vw);
}

.job-requirements .requirements-list li::before {
	content: "";
	display: block;
	height: 2.105em;
	aspect-ratio: 1/1;
	mask-image: url(../../img/arrow-list.svg);
	-webkit-mask-image: url(../../img/arrow-list.svg);
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-position: center;
	background: currentColor;
    break-inside: avoid;
    margin-top: -.5em;
    margin-bottom: -.5em;
    margin-right: 1em;
}

@media (max-width: 1199.98px) {
    .job-intro .back-btn {
        grid-area: 1/2/1/span 6;
    }
    
    .job-intro .job-title {
        grid-area: 2/2/2/span 6;
    }
    
    .job-intro .job-start {
        grid-area: 3/2/3/span 3;
    }
    
    .job-intro .apply-now {
        grid-area: 3/5/3/span 4;
    }

    .job-intro .content-box {
        grid-area: 4/1/span 2/span 14;
    }
    
    .job-intro .job-img-lg {
        margin-left: 0;
	    width: 100%;
    }
    
    .job-intro .content-box .job-img-sm {
        grid-area: 1/1/1/span 5;
    }
    
    .job-intro .content-box .job-infos {
        grid-area: 1/6/1/span 4;
    }
    
    .job-intro .content-box .job-description {
        grid-area: 2/3/2/span 10;
    }

    .job-requirements .requirements-list {
        grid-area: 1/6/1/span 7;
    }
}
  
@media (max-width: 991.98px) {
    .job-intro .content-box {
        grid-area: 5/1/span 2/span 14;
    }
    
    .job-intro .job-img-lg {
        grid-area: 1/8/span 5/span 7;
        margin-left: 0;
    }
    
    .job-intro .content-box .job-img-sm {
        grid-area: 2/1/2/span 5;
        margin-top: var(--m-medium);
    }
    
    .job-intro .content-box .job-infos {
        grid-area: 1/2/1/span 6;
    }
    
    .job-intro .content-box .job-description {
        grid-area: 2/7/2/span 7;
    }

    .job-intro .job-start {
        grid-area: 3/2/3/span 6;
    }

    .job-intro .apply-now {
        grid-area: 4/2/4/span 6;
        justify-self: flex-start;
        margin-top: max(24px, 2.5vw);
    }

    .job-tasks .headline {
        grid-area: 1/2/1/span 4;
    }
    
    .job-tasks .tasks-accordion {
        grid-area: 1/6/1/span 8;
    }
    
    .job-tasks .apply-now {
        grid-area: 2/6/2/span 8;
    }
    
    .job-requirements .headline {
        grid-area: 1/3/1/span 10;
    }
    
    .job-requirements .requirements-list {
        grid-area: 2/3/2/span 10;
        margin-top: var(--m-medium);
    }
}

@media (max-width: 767.98px) {
    .job-tasks .headline {
        grid-area: 1/3/1/span 10;
    }
    
    .job-tasks .tasks-accordion {
        grid-area: 2/3/2/span 10;
        margin-top: var(--m-medium);
    }
    
    .job-tasks .apply-now {
        grid-area: 3/3/3/span 10;
    }
    
    .job-requirements .requirements-list {
        column-count: unset;
    }
}

@media (max-width: 575.98px) {
    .job-intro .back-btn {
        grid-area: 1/2/1/span 12;
    }

    .job-intro .job-title {
        grid-area: 2/2/2/span 12;
    }

    .job-intro .job-start {
        grid-area: 3/2/3/span 12;
    }

    .job-intro .apply-now {
        grid-area: 4/2/4/span 12;
    }

    .job-intro .job-img-lg {
        grid-area: 5/5/span 2/span 10;
        aspect-ratio: 270/392;
        margin-top: var(--m-medium);
    }

    .job-intro .content-box {
        grid-area: 6/1/span 4/span 14;
        padding-bottom: 0;
    }

    .job-intro .content-box .job-infos {
        grid-area: 2/2/2/span 12;
    }

    .job-intro .content-box .job-description {
        grid-area: 3/2/3/span 12;
    }

    .job-intro .content-box .job-img-sm {
        grid-area: 4/1/4/span 10;
    }

    .job-tasks .headline {
        grid-area: 1/2/1/span 12;
    }
    
    .job-tasks .tasks-accordion {
        grid-area: 2/2/2/span 12;
    }
    
    .job-tasks .apply-now {
        grid-area: 3/2/3/span 12;
    }
    
    .job-requirements .headline {
        grid-area: 1/2/1/span 12;
    }
    
    .job-requirements .requirements-list {
        grid-area: 2/2/2/span 12;
    }
}