body{
    margin:0;
    background:#071a36;
    color:#eee;
    font-family:Georgia,serif;
}

/* =========================================
   NAGŁÓWEK
========================================= */

.hero{
    text-align:center;
    padding:25px 20px 50px;
}

/* Logo na komputer */

.logo-desktop{
    display:block;
    width:96%;
    max-width:1800px;
    height:auto;
    margin:0 auto 45px;
    border-radius:28px;
    box-shadow:0 14px 40px rgba(0,0,0,.45);
}

/* Logo na telefon */

.logo-mobile{
    display:none;
}

/* =========================================
   TYTUŁ
========================================= */

h1{
    font-weight:400;
    color:#d9d9d9;
    font-size:3rem;
    margin:20px 0 10px;
}

/* =========================================
   SEKCJE LEGENDY
========================================= */

.scene{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;

    max-width:1500px;

    margin:80px auto;
    padding:0 35px;

    align-items:center;
}

.image img{
    width:100%;
    display:block;

    border-radius:24px;

    box-shadow:0 14px 40px rgba(0,0,0,.45);
}

.text{

    font-size:1.35rem;

    line-height:1.9;

    color:#ece8df;

    text-align:left;

}

/* =========================================
   TELEFON
========================================= */

@media (max-width:768px){

.hero{

    padding:20px 15px 35px;

}

.logo-desktop{

    display:none;

}

.logo-mobile{

    display:block;

    width:96%;

    max-width:650px;

    height:auto;

    margin:0 auto 35px;

    border-radius:24px;

    box-shadow:0 14px 40px rgba(0,0,0,.45);

}

h1{

    font-size:2.2rem;

    line-height:1.15;

    margin-bottom:20px;

}

.scene{

    grid-template-columns:1fr;

    gap:25px;

    margin:50px auto;

    padding:0 18px;

}

.text{

    font-size:1.18rem;

    text-align:center;

}

}