.job-listing {
    padding: 120px 20px 62px 20px;
    background-color: var(--corp-color-white);
}

.job-listing__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.job-listing__eyebrow {
    font-family: var(--corp-font-family);
    font-size: var(--corp-type-mobile-body-1-font-size);
    line-height: var(--corp-type-mobile-body-1-line-height);
    font-weight: var(--fw-500);
    text-transform: uppercase;
    color: var(--corp-color-neutral-black);
    opacity: 0.4;
}

.job-listing__heading {
    font-size: var(--corp-type-mobile-display-3-font-size);
    font-weight: var(--corp-type-mobile-display-2-font-weight);
    line-height: var(--corp-type-mobile-tag11-disclaimer-line-height);
    color: var(--corp-color-neutral-black);
    margin-bottom: 40px;
}

.job-listing__heading>strong {
    color: var(--corp-color-primary);
    font-weight: var(--fw-400);
}



.job-listing>div:last-child,
.job-listing>div:last-child>div {
    width: 100%;
    padding: 0;
}


.job-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}


.job-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    border-bottom: none;
}

/* Left */
.job-card__content {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.job-card__title {
    font-size: var(--corp-type-mobile-heading-xxl-font-size);
    line-height: var(--corp-type-mobile-heading-xxl-line-height);
    font-weight: var(--corp-type-mobile-display-2-font-weight);
    margin: 0;
}

.job-card__meta {
    font-size: var(--corp-type-mobile-heading-2-medium-font-size);
    color: var(--corp-color-neutral-black);
    opacity: 0.4;
    line-height: var(--corp-type-mobile-tag-1-line-height);
    font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
}

.job-card__button {
    background-color: var(--corp-color-primary);
    border: 1px solid var(--corp-color-primary);
    color: var(--corp-color-white);
    padding: 12px 40px;
    border-radius: var(--corp-radius-xxl);
    text-decoration: none;
    display: inline-block;

    font-size: var(--corp-type-mobile-body-1-font-size);
    font-style: normal;
    font-weight: var(--corp-type-mobile-display-3-font-weight);
    line-height: var(--corp-type-mobile-tag-1-line-height);
}



@media screen and (width >=768px) {
    .job-listing {
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .job-listing__header {
        align-items: center;
    }

    .job-listing__eyebrow {
        font-size: var(--corp-type-tablet-body-lg-font-size);
        font-weight: var(--corp-type-tablet-heading-2-font-weight);
        line-height: var(--corp-type-tablet-heading-xxl-line-height);
        letter-spacing: var(--corp-type-tablet-display-xxl-letter-spacing);
        opacity: 0.5;
    }

    .job-listing__heading {
        font-size: var( --corp-type-tablet-display-l-font-size);
        font-weight: var(--corp-type-tablet-display-font-weight);
        line-height: var(--corp-type-tablet-display-3xl-line-height);
        letter-spacing: -0.58px;
        color: var(--corp-color-primary);
        text-align: center;
    }



    .job-list {
        gap: 20px;
    }

    .job-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0;
    }


    .job-card__title {
        font-size: var(--corp-type-tablet-body-xl-font-size);
        font-weight: var(--corp-type-tablet-body-lg-font-weight);
        letter-spacing: var(--corp-type-tablet-display-3xl-letter-spacing);
        line-height: var(--corp-type-tablet-body-11-line-height);
    }

    .job-card__meta {
        font-size: var(--corp-type-tablet-body-sm-font-size);
        font-weight: var(--corp-type-tablet-body-lg-font-weight);
        letter-spacing: var(--corp-type-tablet-display-xl-letter-spacing);
        opacity: 0.6;
        line-height: var(--corp-type-tablet-body-sm-3-line-height);
    }

    .job-card__cta {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .job-card__button {
        height: 100%;
        padding: 12px 20px;
        font-size: var(--corp-type-tablet-body-lg-font-size);
        font-weight: var(--corp-type-tablet-body-lg-font-weight);
        letter-spacing: var(--corp-type-tablet-display-2xl-letter-spacing);
    }


}


@media screen and (width >=1200px) {
    .job-listing {
        padding: 80px 100px 45px 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .job-listing__header {
        align-items: center;
        gap: 24px;
    }

    .job-listing__eyebrow {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-3xl-line-height);
        letter-spacing: var(--corp-cta-letter-spacing-primary);
        opacity: 0.5;
    }


    .job-listing__heading {
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-2-font-weight);
        line-height: var(--corp-type-desktop-heading-4xxl-line-height);
        letter-spacing: var(--corp-type-desktop-display-5xl-letter-spacing);
        color: var(--corp-color-primary);
        text-align: center;
        margin-bottom: 60px;
    }



    .job-list {
        gap: 9px;
    }

    .job-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0;
        padding: 24px;
    }

    .job-card__content {
        gap: 16px;
    }


    .job-card__title {
        font-size: var(--corp-type-desktop-heading-2-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-1-font-size);
    }

    .job-card__meta {
        font-size: var(--corp-type-desktop-body-4-font-size);
        font-weight: var(--corp-type-desktop-body-5-font-weight);
        opacity: 0.4;
        line-height: var(--corp-type-desktop-caption-7-line-height);
    }


    .job-card__button {
        padding: 12px 24px;
        border-radius: var(--corp-radius-md);
        font-size: var(--corp-type-desktop-body-5-font-size);
        font-weight: var(--corp-type-desktop-body-xs-font-weight);
        line-height: var(--corp-type-desktop-body-xs-line-height);
    }


}