@media screen and (max-width: 770px) {
    .hero {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-height: 0 !important;
    }

    .hero .hero-content {
        order: 1 !important;
        padding: 28px 0 32px !important;
    }

    .hero .hero-visual {
        order: 2 !important;
        display: block !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 210px !important;
        flex: none !important;
        background-position: 78% center !important;
    }

    .hero::after {
        display: none !important;
    }
}


/* ACADEMY MOBILE HERO BACKGROUND */
@media screen and (max-width: 770px) {

    .hero {
        display: block !important;
        min-height: 0 !important;

        background-color: #101C30 !important;

        background-image:
            linear-gradient(
                100deg,
                rgba(10, 21, 38, 0.78),
                rgba(10, 21, 38, 0.63)
            ),
            url('/assets/images/academy-hero.webp') !important;

        background-position: center, 76% center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    .hero .hero-visual {
        display: none !important;
    }

    .hero::after {
        display: none !important;
    }

    .hero .hero-content {
        position: relative !important;
        z-index: 1 !important;

        width: calc(100% - 38px) !important;
        max-width: 600px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 34px 0 40px !important;
        background: transparent !important;
    }

    .hero h1 {
        font-size: clamp(2.55rem, 10.5vw, 3.06rem) !important;
        line-height: 1.1 !important;
    }

    .hero .hero-actions .btn {
        width: 100% !important;
    }
}
/* END ACADEMY MOBILE HERO BACKGROUND */