.hero{

    position:relative;

    padding:170px 0 110px;

    /* Placeholder do czasu podmiany na prawdziwe zdjęcie: drugi gradient
       symuluje fotografię, pierwszy to ciemna nakładka pod tekst. Żeby
       wgrać zdjęcie, dodaj np. url('.../hero.jpg') przed drugim gradientem
       i ustaw background-size:cover. */
    background:
        linear-gradient(100deg, rgba(20,22,15,.9) 10%, rgba(20,22,15,.6) 45%, rgba(20,22,15,.25) 100%),
        linear-gradient(135deg, #3b3226 0%, #23261c 55%, #1a1c14 100%);

    color:#fff;

    overflow:hidden;

}

.hero__inner{

    position:relative;

}

.hero__title{

    max-width:640px;

    font-size:56px;

    line-height:1.15;

    margin-bottom:24px;

}

.hero__title span{

    color:#D8B978;

}

.hero__description{

    max-width:480px;

    margin-bottom:42px;

    font-size:18px;

    line-height:1.75;

    color:rgba(255,255,255,.8);

}

.hero__buttons{

    display:flex;

    gap:20px;

}

.hero__buttons .btn-primary span{

    margin-left:8px;

    transition:transform .2s ease;

    display:inline-block;

}

.hero__buttons .btn-primary:hover span{

    transform:translateX(4px);

}

@media (max-width:760px){

    .hero{

        padding:120px 0 64px;

    }

    .hero__title{

        font-size:36px;

    }

    .hero__description{

        font-size:16px;

    }

    .hero__buttons{

        flex-direction:column;

    }

    .hero__buttons .btn{

        width:100%;

    }

}