/*
 * EUROSPACE mobile hero very high v3.5
 * Только mobile.
 * Поднимает фон максимально высоко — уже под H1 и текстом.
 */

@media (max-width: 768px) {
    /*
     * ВАЖНО:
     * делаем картинку ВЫШЕ hero (не 100%, а ~132%),
     * чтобы появилась возможность кадрировать верхнюю часть.
     */
    .es-render-hero::before {
        background-size:
            auto 132%,
            auto 132% !important;

        opacity: .80 !important;

        filter:
            saturate(.89)
            contrast(.95)
            brightness(1.05) !important;
    }

    /*
     * Екатеринбург:
     * поднимаем оба фрагмента почти к верхнему краю.
     */
    .es-render-hero--ekb::before {
        background-position:
            13% 6%,
            87% 6% !important;
    }

    /*
     * Москва:
     * также существенно вверх.
     */
    .es-render-hero--msk::before {
        background-position:
            11% 4%,
            89% 4% !important;
    }

    /*
     * Ослабляем центральную белую маску,
     * чтобы город ощущался уже за заголовком.
     */
    .es-render-hero::after {
        background:
            radial-gradient(
                ellipse 86% 31% at 50% 8%,
                rgba(255,253,250,.93) 0%,
                rgba(255,253,250,.84) 34%,
                rgba(255,253,250,.48) 68%,
                rgba(255,253,250,.12) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255,253,250,.22) 0%,
                rgba(255,253,250,.08) 26%,
                rgba(255,253,250,.06) 58%,
                rgba(255,253,250,.12) 100%
            ) !important;
    }
}

@media (max-width: 430px) {
    .es-render-hero::before {
        background-size:
            auto 138%,
            auto 138% !important;

        opacity: .82 !important;
    }

    .es-render-hero--ekb::before {
        background-position:
            15% 2%,
            85% 2% !important;
    }

    .es-render-hero--msk::before {
        background-position:
            13% 1%,
            87% 1% !important;
    }

    .es-render-hero::after {
        background:
            radial-gradient(
                ellipse 88% 30% at 50% 7%,
                rgba(255,253,250,.91) 0%,
                rgba(255,253,250,.80) 34%,
                rgba(255,253,250,.42) 70%,
                rgba(255,253,250,.10) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255,253,250,.18) 0%,
                rgba(255,253,250,.07) 26%,
                rgba(255,253,250,.05) 58%,
                rgba(255,253,250,.10) 100%
            ) !important;
    }
}