.GalleryWrapper
    background: $white
    // display: grid
    // grid-template-columns: 1fr 10fr 1fr
    .project.TitleWrapper
        z-index: 2
        position: sticky
        top: 5rem
        background: $white
        display: grid
        grid-template-columns: 2fr 1fr 2fr
        align-items: center
        h1
            z-index: 2
            margin: 1rem 3rem
            text-align: center
            font-size: 3rem
            font-family: Zeyada, cursive
            font-weight: 100

        .bar
            border-bottom: 1px solid rgba($black, .2)
.project.gallery
    display: grid
    grid-gap: 1rem
    grid-column: 2
    grid-auto-flow: dense
    justify-content: center


    grid-template-columns: repeat(auto-fill, 300px)
    grid-auto-rows: 300px 

    @media screen and (max-width: 800px)
        grid-template-columns: repeat(auto-fill, 150px)
        grid-auto-rows: 150px

    a
        text-decoration: none
        color: $black

    .project.thumbnail
        display: grid
        justify-content: center
        justify-items: center
        align-content: center
        align-items: center
        overflow: hidden
        grid-template-columns: 1
        grid-template-rows: 1
        
        img
            grid-column: 1 / -1;
            grid-row: 1 / -1;
            object-fit: cover
            height: 100%
            width: 100%
        
        .project.overlay
            background: #ffc60032
            background: $white
            grid-column: 1 / -1;
            grid-row: 1 / -1;
            position: relative;
            display: grid;
            justify-items: center;
            align-items: center;
            transition: 0.2s;
            transform: translateY(100%);
            text-transform: uppercase
            height: 100%
            width: 100%


        &:hover .project.overlay
            transform: translateY(0)

section.project .post
    padding: 1rem
    margin: auto
    max-width: 800px

    img
        max-width: 800px
        width: calc(100vw - 2rem)
    

ul.project-nav
    display: flex
    flex-direction: column
    align-items: center
    li
        padding: .5rem 1rem
        list-style-type: none
    a
        padding: .5rem 1rem
        text-decoration: none


.project .nav-wrapper
    text-align: center
    display: flex
    flex-direction: column
    align-items: center
    h2
        border-bottom: 1px solid $grey
        

