/* Project Grid */
#projects {
    margin: 0 5%; /* Replace with margin var */
    margin-top:3rem;
    margin-bottom:5rem;
}

#projects .grid-wrap {
    display: grid;
    
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    
    row-gap: 2rem;
    
    column-gap: 2.5%;
}



@media (min-width: 1200px) {
    #projects .grid-wrap {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 4rem;
    }
}

@media (min-width: 714px) {

    #projects .grid-wrap {
        row-gap: 4rem;
    }

}