/* CE ARENA — HERO PICTURE */

.hero.hero-gamer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #061526;
}

.hero.hero-gamer::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 58%;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            #061526 0%,
            rgba(6, 21, 38, 0.85) 16%,
            rgba(6, 21, 38, 0.25) 40%,
            rgba(6, 21, 38, 0) 60%
        ),
        url("/images/ce-arena-hero-gamer.jpg")
        center top / cover no-repeat;
}

.hero.hero-gamer .hero-content {
    position: relative;
    z-index: 2;
    width: 52%;
    max-width: 620px;
}

/* Tablets and phones */
@media (max-width: 900px) {
    .hero.hero-gamer {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 0;
    }

    .hero.hero-gamer .hero-content {
        order: 1;
        width: 100%;
        max-width: none;
        padding: 48px 6% 28px;
    }

    .hero.hero-gamer::before {
        position: relative;
        inset: auto;
        order: 2;
        flex: none;
        width: 100%;
        height: clamp(300px, 70vw, 520px);
        background:
            linear-gradient(
                180deg,
                #061526 0%,
                rgba(6, 21, 38, 0.15) 25%,
                rgba(6, 21, 38, 0) 50%
            ),
            url("/images/ce-arena-hero-gamer.jpg")
            center top / cover no-repeat;
    }
}