.hero{
    background-image: url('../img/hero.jpg');
    background-size: cover;
    min-height: 100vh;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    & h1{
        font-size: 3rem;
        margin-bottom: 15px;
    }
    & h2{
        font-size: 2rem;
        margin-bottom: 15px;
    }
    & .btn{
        background-color: #fff;
        border-radius: 4px;
        color: var(--cor-princ);
        padding: 20px 50px;
        text-transform: uppercase;
    }
}
@media (max-width: 700px){
    .hero{
        h1{
            font-size: 2.5rem;
        }
        h3{
            font-size: 1.5rem;
        }
    }
}