.inner-hero .topline {
    color: rgba(251, 161, 97, 0.95);
    /* text-shadow: 0 1px 2px rgba(255, 255, 255, .18); */
}

.inner-hero:before {
    background-image: url("../img/resources4-banner.webp");
    filter: saturate(.92) contrast(.96) brightness(.98);
}

.inner-title {
    margin-bottom: 20px;
}

.resources-cards-section {
    padding-top: 0;
    padding-bottom: 86px;
}

.resources-cards {
    align-items: stretch;
}

.resources-cards .ui-card {
    min-height: 270px;
}

.resources-cards .tag {
    align-self: flex-start;
}

.resources-cards .ui-card h3 {
    font-size: 30px;
}

@media (max-width: 960px) {
    .resources-cards-section {
        padding-bottom: 72px;
    }

    .resources-cards .ui-card {
        min-height: 230px;
    }
}

@media (max-width: 620px) {

    /*
     * Shorten the mobile hero to approximately the height currently
     * occupied by the image, eliminating the solid-colour band.
     */
    .inner-hero {
        min-height: 98svh;
        padding-bottom: 0;
        background: #182019;
    }

    /*
     * Keep approximately the same zoomed-out composition,
     * but let the image fill the newly shortened hero completely.
     */
    .inner-hero:before {
        background-size: auto 100%;
        background-position: 80% top;
        background-repeat: no-repeat;
    }

    /*
     * Remove the shared green/foggy gradients on this page,
     * on mobile only.
     */
    .inner-hero:after {
        background: none;
    }

    /*
     * Match the copy container to the shorter hero.
     * Because it is aligned to the bottom, reducing padding-bottom
     * moves both the title and subtitle lower.
     */
    .inner-hero-content {
        min-height: calc(98svh - 96px);
        padding: 92px 0 0px;
    }

    .inner-title {
        margin-bottom: 12px;
    }

    .resources-cards-section {
        padding-bottom: 62px;
    }

    .resources-cards .ui-card h3 {
        font-size: 28px;
    }
}