.subpage-hero {
        position: relative;
        overflow: hidden;
        max-height: 40rem;
    }

    .subpage-hero img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .subpage-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(180deg,
                rgba(37, 36, 98, 0) 0%,
                rgba(37, 36, 98, 0.25) 40%,
                rgba(37, 36, 98, 0.7) 75%,
                rgba(37, 36, 98, 0.9) 100%);
        pointer-events: none;
    }

    .subpage-hero-title {
        position: absolute;
        bottom: 4.5rem;
        z-index: 2;
        margin: 0;
        color: #fff;
    }

    @media (max-width:768px) {
        .subpage-hero-title {
            bottom: 1.5rem;
        }
    }