.hero{
    background-image: url(../images/flores-pequeno.png);
    background-size: auto 40rem;
    background-blend-mode: color-burn;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-color: var(--hero-background);
}

.hero .box{
    padding: 4rem 2rem 28rem 2rem;
    max-width: 60rem;
}

.hero h1{
    font-family: "Grandstander", sans-serif;
    font-weight: bold;
    letter-spacing: -0.1rem;
    font-size: 5rem;
    line-height: 6rem;
}

.hero h1 span{
    color: var(--secondary);
}

.hero h2{
    font-size: 2rem;
    font-weight: 400;
    margin: 3rem 0;
}

@media(width>900px){
    .hero{
        background-image: url(../images/flores.png);
        background-size: 100vw 80vh;
    }

    .hero .box{
        padding: 15rem 2rem;
    }
}