/********** media queries ********/
@media only screen and (max-width: 1800px) {
    section {
        height: 100%;
        padding: 0 50px;
    }
    #hero {
        padding-bottom: 40px;
    }
    #hero .container {
        flex-direction: column-reverse;
    }
    .left, .right {
        align-items: center;
    }
    #works .container {
        height: auto;
        align-items: center;
    }

    .works-container {
        justify-content: center;
    }
}

@media only screen and (max-width: 1500px) {
    .works-container {
        grid-template-columns: 390px 390px;
        padding: 0;
    }
}

@media only screen and (max-width: 1100px) {
    .contact-container {
        flex-direction: column;
    }
}