/* PixelRealm Games — bannière multivers */

.main-content .welcome {
    position: relative;
    isolation: isolate;
    min-height: 260px;
    padding: 34px 38px;
    overflow: hidden;

    background-color: #121d34;
    background-image:
        linear-gradient(
            90deg,
            rgba(8,13,30,.90) 0%,
            rgba(8,13,30,.72) 25%,
            rgba(8,13,30,.18) 55%,
            transparent 100%
        ),
        url("/games/assets/branding/pixelrealm-worlds-banner.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid #59428e;
    border-radius: 20px;
}

.main-content .welcome > div {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.main-content .welcome h1,
.main-content .welcome p,
.main-content .welcome .eyebrow {
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

.main-content .welcome .welcome-logo {
    display: none !important;
}

@media (max-width: 768px) {
    .main-content .welcome {
        min-height: 240px;
        padding: 24px;
        background-position: 55% center;
        background-image:
            linear-gradient(
                90deg,
                rgba(8,13,30,.93),
                rgba(8,13,30,.58)
            ),
            url("/games/assets/branding/pixelrealm-worlds-banner.png");
    }
}

/* PIXELREALM BANNER HEIGHT FINAL */

@media (min-width: 769px) {
    .main-content > section.welcome {
        height: 260px !important;
        min-height: 260px !important;
        max-height: none !important;
        box-sizing: border-box !important;
        background-position: center 75% !important;
        background-size: cover !important;
    }
}

@media (max-width: 768px) {
    .main-content > section.welcome {
        height: auto !important;
        min-height: 220px !important;
    }
}