/* ===============================
   Mobile first (base)
================================= */
.program-banner {
    border-radius: 3em;
    max-height: 640px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../../imgs/program/top-banner-sm.png');
}

.program-title {
    font-size: 20px;
}

.program-flex-text-top {
    min-height: 245px;
}

.program-text-title {
    font-size: 25px;
}

h4.text-heading-6 {
    text-align: left;
    color: #0A516D;
    font-weight: 500;
}

.img-bottom {
    object-position: 65px -50px;
    object-fit: none;
}

.button-apply {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../../imgs/program/apply-sm.png');
    min-height: 140px
}

.program-hero-cta {
    /* min-width intentionally not forced here so it doesn't
       fight the pill button's own bg-green-800/rounded-pill sizing */
}


/* ===============================
   ≥ 768px (Tablet)
================================= */
@media (min-width: 768px) {
    .program-title {
        font-size: 40px
    }

    h2.text-heading-2 {
        font-size: 35px;
        text-align: center;
        color: #ffffff;
        text-shadow: 1px 3px 6px black;
    }

    .program-flex-text-top {
        min-height: 500px
    }

    .img-bottom {
        object-position: unset;
        object-fit: cover;
    }

    .button-apply {
        min-height: 245px
    }
}


/* ===============================
   ≥ 1024px (Desktop)
   Hero image swaps to top-banner.png here
================================= */
@media (min-width: 1024px) {
    .img-bottom {
        object-position: unset;
        object-fit: cover;
    }

    .program-banner {
        background-image: url('../../imgs/program/top-banner.png');
        background-size: 90%;
        background-position: right;
        background-color: #e4e7ec;
    }

    .program-title {
        font-size: 60px
    }

    .program-text-title {
        font-size: 50px;
    }

    .program-flex-text-top {
        min-height: 640px;
    }

    .button-apply {
        background-image: url('../../imgs/program/apply.png');
        min-height: 260px;
    }
}