@media (min-width: 768px) {
    header {
        padding: 25px 30px;
    }
    header img {
        width: 15%;
    }
    #hero {
        margin: 5% auto;
        width: 70%;
    }
    .title-form {
        font-size: 20px;
        padding: 20px;
    }
    form {
        padding: 40px 25px;
    }
    label {
        padding-bottom: 10px;
    }
    input {
        margin-bottom: 30px;
    }
    button {
        margin: 0 auto;
        width: 50%;
    }
}

/* ----------------------------------- */

@media (min-width: 955px) {
    #hero {
        width: 40%;
    }
}

/* ----------------------------------- */

@media (min-width: 1024px) {
    header {
        padding: 30px 50px;
    }
    #hero {
        margin: 8% auto;
    }
    .title-form {
        font-size: 17px;
        padding: 10px;
    }
    .footer {
        bottom: 0;
        position: absolute;
    }
}

/* ----------------------------------- */

@media (min-width: 1200px) {
    header {
        padding: 20px 50px;
    }
    header img {
        width: 8%;
    }
    #hero {
        margin: 3% auto;
        width: 30%;
    }
    button {
        margin: 0 auto;
        width: 70%;
    }
}