.jobs {
    width: 100%;
    padding: 65px 6% 80px;
}


.job_banner {
    width: 100%;
    height: auto;
    padding-bottom: 36px;
}


.job_label {
    margin-bottom: 4px;

    font-size: var(--fs-span);
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--orange);
    text-transform: uppercase;
}



/* ---------------------------------------- job cards --------------------- */
.job_container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.job_box {
    padding: 20px;

    background-color: var(--black);
    border-radius: var(--radius-s);
    border: 1px solid var(--orange);
}

.job_box_head {
    padding-bottom: 20px;
    margin-bottom: 16px;

    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.job_box_info {
    display: grid;
    grid-template-columns: 1fr;
}

.job_box_info p:not(:first-child) {
    position: relative;
    padding-left: 15px;
}

.job_box_info p:not(:first-child)::before {
    content: "\25CF";
    color: var(--orange);

    position: absolute;
    left: 0;
}

.job_box .orange {
    margin-top: 12px;
}

.job_btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 8px 0;

    width: auto;
    height: auto;

    color: var(--white);
    font-weight: 600;
    text-decoration: none;

    transition:
        color .3s ease,
        gap .4s cubic-bezier(.22,.61,.36,1);
}

.job_arrow {
    color: var(--orange);

    transition:
        transform .4s cubic-bezier(.22,.61,.36,1);
}

@media (hover: hover) {
    .job_box:hover .job_btn {
        color: var(--orange);
        gap: 14px;
    }

    .job_box:hover .job_arrow {
        transform: translateX(4px);
    }
}


/* ------------------------------------------------------ MOBILE HORIZONTAL --------------------------- */
@media (orientation: landscape) and (max-height: 500px) {
    .job_box_info {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}


/* ---------------------------------------------------------- TABLET ---------------------------------- */
@media (min-width: 768px) {
    .job_container {
        grid-template-columns: 1fr;
        gap: 40px 20px;
    }

    .job_box_info {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .job_box .orange {
        margin-top: 18px;
    }
}



/* -------------------------------------------------- NOTEBOOK ------------------------------------ */
@media (min-width: 1024px) {
    .job_container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .job_box_info {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .job_box {
        padding: 26px;
    }
}


/* --------------------------------------------------- DELL ------------------------------------- */
@media (min-width: 1200px) {
    .jobs {
        padding: 65px 12% 80px;
    }
}



/* ----------------------------------------------------- Standard Display ----------------------------- */
@media (min-width: 1440px) {
    .job_container {
        grid-template-columns: 1fr;
    }

}