/*Large+ Screens*/
@media screen and (min-width:992px){
    /* Projects Grid into sections */
    #grid {
        width:100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    a.section {
        height:80vh;
        text-decoration: none;
    }

    .section img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition:0.6s;
        filter:brightness(70%)
    }

    .section:hover img {
        filter: brightness(30%);
    }

    .sectionTitle {
        z-index:1;
        color:white;
        text-align: center;
        text-justify: center;
    }

    .sectionTitle h1 {
        margin:0px;
        font-size:25px;
        transition:0.6s;
        text-decoration: none;
    }

    .section:hover .sectionTitle h1 {
        transform: translateY(-35vh);
    }
}

/*Medium Screens*/
@media screen and (min-width:768px) and (max-width:991px){
    /* Projects Grid into sections */
    #grid {
        width:100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    a.section {
        height:80vh;
        text-decoration: none;
    }

    .section img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition:0.6s;
        filter:brightness(50%)
    }

    .sectionTitle {
        z-index:1;
        color:white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .sectionTitle h1 {
        margin:0px;
        font-size:25px;
        transition:0.6s;
        text-decoration: none;
        transform: translateY(-40vh);

    }

    .section:hover img {
        filter: brightness(90%);
    }
}

/*Small + Mobile Screens*/
@media screen and (max-width:767px){
    /* Projects Grid into sections */
    #grid {
        width:100%;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
    }

    a.section {
        height:25vh;
        text-decoration: none;
    }

    .section img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition:0.6s;
        filter:brightness(50%)
    }

    .sectionTitle {
        z-index:1;
        color:white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .sectionTitle h1 {
        margin:0px;
        font-size:20px;
        transition:0.6s;
        text-decoration: none;
        transform: translateY(-12.5vh);
    }
}