.jobs-teaser .headline {
    grid-area: 1/4/1/span 8;
    margin-bottom: max(64px, 6.953125vw);
}

.jobs-teaser .jobs-container {
    grid-area: 2/4/2/span 8;
    margin-bottom: max(48px, 3.90625vw);
}

.jobs-teaser .jobs-container .job-item {
	grid-template-columns: repeat(7, 1fr);
	grid-gap: var(--grid-gap);
	align-items: center;
	width: 100%;
	border-top: 3px solid currentColor;
	padding: max(12px, 0.78125vw) 0;
	color: currentColor;
}

.jobs-teaser .jobs-container .job-item:last-child {
    border-bottom: 3px solid currentColor;
}

.jobs-teaser .jobs-container .job-item .job-start {
    grid-column: 1/1
}

.jobs-teaser .jobs-container .job-item .job-title {
	grid-column: 2/span 4;
	max-width: 48ch;
    text-wrap: balance;
}

.jobs-teaser .jobs-container .job-item .job-title .job-title-main {
    font-size: var(--fs-24);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .05em;
}

.jobs-teaser .jobs-container .job-item::before {
    content: "";
    display: block;
    height: max(32px, 1.5625vw);
    aspect-ratio: 1/1;
    background-color: var(--primary);
    border-radius: 15px;
    grid-area: 1/7/1/7;
    justify-self: flex-end;
    z-index: 1;
    transition: var(--def-trans);
    border: 2px solid var(--primary);
}

.jobs-teaser .jobs-container .job-item::after {
    content: "";
    display: block;
    height: max(32px, 1.5625vw);
    aspect-ratio: 1/1;
    transition: var(--def-trans);
    mask-image: url(../../img/arrow-right.svg);
    -webkit-mask-image: url(../../img/arrow-right.svg);
    mask-size: 50%;
    -webkit-mask-size: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-position: center center;
    background-color: var(--secondary);
    z-index: 1;
    grid-area: 1/7/1/7;
    justify-self: flex-end;
}

.jobs-teaser .jobs-container .job-item:hover::before {
    background-color: transparent
}

.jobs-teaser .jobs-container .job-item:hover::after {
    background-color: var(--primary);
}

.jobs-teaser .text-container {
    grid-area: 3/4/3/span 5;
    text-transform: none;
}

.jobs-teaser .btns-container {
    grid-area: 3/10/3/span 2;
    justify-self: flex-end;
    align-self: center;
}

@media (max-width: 1499.98px) {
    .jobs-teaser .text-container {
        grid-area: 3/4/3/span 8;
        text-transform: none;
    }

    .jobs-teaser .btns-container {
        grid-area: 4/4/4/span 8;
        margin-top: var(--m-small);
    }
}

@media (max-width: 991.98px) {
    .jobs-teaser .headline,
    .jobs-teaser .jobs-container,
    .jobs-teaser .text-container,
    .jobs-teaser .btns-container {
        grid-column: 3/span 10;
    }
}

@media (max-width: 767.98px) {
    .jobs-teaser .headline,
    .jobs-teaser .jobs-container,
    .jobs-teaser .text-container,
    .jobs-teaser .btns-container {
        grid-column: 2/span 12;
    }

    .jobs-teaser .jobs-container .job-item {
        padding: max(16px, 0.78125vw) 0;
    }

    .jobs-teaser .jobs-container .job-item .job-start {
        grid-area: 1/1/1/span 6;
    }
    
    .jobs-teaser .jobs-container .job-item .job-title {
        grid-area: 2/1/2/span 6;
        max-width: unset;
        text-wrap: balance;
    }
    
    .jobs-teaser .jobs-container .job-item .job-location {
        grid-area: 3/1/3/span 6;
    }
    
    .jobs-teaser .jobs-container .job-item::before {
        grid-area: 1/7/span 3/7;
    }
    
    .jobs-teaser .jobs-container .job-item::after {
        grid-area: 1/7/span 3/7;
    }
}