/* =====================================
   LINEA - mobile.css
   ===================================== */

body{
    overflow-x:hidden;
}

/* ---------- HERO ---------- */

.hero{
    position:relative;
    height:auto;
}

.hero img{
    content:url("../images/hero-mobile.jpg");
    width:100%;
    height:auto;
    display:block;
}

/* ---------- STREAMING ---------- */

.streaming{

    position:absolute;

    top:69%;

    left:50%;

    transform:translate(-50%,-50%);

    width:100%;

    text-align:center;

    z-index:100;

    padding:0 10px;

}

.streaming h2{

    font-size:14px;

    letter-spacing:3px;

    margin-bottom:10px;

    color:#fff;

    text-shadow:0 2px 8px rgba(0,0,0,.8);

}

.streaming-links{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    max-width:300px;

    margin:0 auto;

}

.streaming-links a{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    padding:8px 10px;

    font-size:12px;

    color:#fff;

    text-decoration:none;

    border-radius:25px;

    background:rgba(179,111,77,.88);

    backdrop-filter:blur(10px);

}

.streaming-links a i{

    font-size:13px;

}

.streaming-links a:last-child{

    grid-column:1 / -1;

    width:180px;

    margin:0 auto;

}

/* ---------- CONTENT ---------- */

.infos{

    grid-template-columns:1fr !important;

    gap:55px;

    margin:45px auto;

    padding:0 20px;

}

.box{

    padding:0;

    border:none !important;

    text-align:center;

}

.box h3{

    font-size:36px;

    margin-bottom:15px;

}

.box img{

    width:85%;

    max-width:320px;

    display:block;

    margin:0 auto 25px;

    border-radius:8px;

}

.box p{

    font-size:16px;

    line-height:1.8;

}

.box li{

    font-size:16px;

    line-height:1.8;

}

/* ---------- BUTTON ---------- */

.play-button{

    padding:12px 22px;

    font-size:15px;

}

/* ---------- FOOTER ---------- */

footer{

    padding:35px 20px;

    text-align:center;

    line-height:1.8;

    font-size:14px;

}

footer a{

    display:inline-block;

    margin:0 5px;

}

/* ---------- SEHR KLEINE HANDYS ---------- */

@media (max-width:390px){

    .streaming{

        top:52%;

    }

    .streaming-links{

        max-width:270px;

        gap:7px;

    }

    .streaming-links a{

        font-size:11px;

        padding:7px 8px;

    }

    .streaming-links a:last-child{

        width:160px;

    }

    .box h3{

        font-size:32px;

    }

}