body {
    font-family: 'Lato', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: white;
}
h1 {
    font-size: 60;

}
nav {
    width: 100%;
    display: flex;
    justify-content: right;
    background-image: linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0));
}

nav ul {
    display: flex;
}

li {
    list-style: none;
    margin: 0.5rem 1.5rem;
}

a {
    text-decoration: none;
    color: rgb(255, 255, 255);
}

.hero {
    width: 100%;
    height: 85%;
    background-image: linear-gradient(to bottom, rgba(200, 200, 200, 0.8), rgba(50, 50, 50, 0.5)), url('../images/hero-main.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* GALLERY */

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 0px;

}

.column {
    flex: 25%;
    max-width: 24.1%;
    padding: 0px 4px;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

/* responsive*/

    /* tablet */
    @media screen and (max-width: 768px) {
        .column {
        flex: 50%;
        max-width: 50%;
        }

    }
    
    /* phone */
    @media screen and (max-width: 540px) {
        .column {
        flex: 50%;
        max-width: 40%;
        }

        .column {
            flex: 100%;
            max-width: 100%;
            }

    }