/* Watercolor careers scene, composed around the existing white content cards. */
.recruitment-page {
    position: relative;
    isolation: isolate;
    min-height: 780px;
    padding-bottom: 210px;
    background-color: #f2f7fb;
    background-image:
        linear-gradient(to bottom, rgba(244, 247, 251, 0.65) 0%, rgba(244, 247, 251, 0.9) 25%, rgba(244, 247, 251, 0.25) 70%, transparent 100%),
        url('/images/career/weather-careers.png?v=1');
    background-position: center, center bottom;
    background-size: 100% 100%, max(1440px, 100%) auto;
    background-repeat: no-repeat;
}

/* Anchor the upper artwork independently of the page's content height. */
.recruitment-page::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 480px;
    z-index: -1;
    pointer-events: none;
    background: url('/images/career/careers-top-frame.png?v=1') center top / 100% auto no-repeat;
    opacity: 0.8;
    mask-image: linear-gradient(to bottom, #000 75%, transparent);
}

@media (max-width: 767px) {
    .recruitment-page {
        min-height: 700px;
        padding-bottom: 180px;
        background-size: 100% 100%, 1000px auto;
        background-position: center, 25% bottom;
    }

    .recruitment-page::before {
        height: 280px;
        background-size: 1000px auto;
        opacity: 0.55;
    }
}