.projects-wrapper { 
    min-height: 40em;
    max-width: 1115px;
    padding: 4.3em 0em;
    margin: 0 auto;
    align-items: center;
    justify-content: center;

    display: grid;
    grid-template-columns: 330px 330px 330px;
    grid-template-rows: 330px 330px 330px 330px 330px 330px 330px;
    gap: 15px 15px;
    grid-auto-flow: column;
    grid-template-areas:
      "proj1 proj1 proj2"
      "proj3 proj4 proj5"
      "proj6 proj7 proj7"
      "proj8 proj9 proj10"
      "proj11 proj12 proj13"
      "proj14 proj15 proj16"
      "proj17 peoj18 proj19";
}
.projects-wrapper a{
    cursor: url("./images/cursor-hover.svg"), auto;
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x:hidden;


}
.grid-image img {
    position: absolute;
    width: auto;
    height: 100%;

}

.grid-overlay{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: ease-in-out opacity .3s;

}

.grid-overlay:hover{   
    opacity: 1;
}

.grid-overlay:before,
.grid-overlay:after{
    transition: .3s ease-out .2s filter .5s;;
    transition: opacity .5s;
}

.projects-wrapper img:hover{
    filter: blur(10px);

}

.grid-overlay-background{
    position: absolute;

    width: 100%;
    height: 100%;
    background-color: var(--secondary-color2);
    opacity: 80%;

}
.grid-overlay-text{
    text-align: center;
    position: absolute;
    padding: .7em;
}



  
.proj1 {
    grid-area: proj1 / proj1;
    width: 100%;
    height: 100%;
}
.proj2 {
    grid-area: proj2;
    
   
}
  
.proj3 {
    grid-area: proj3;
    
}
  
.proj4 { grid-area: proj4; }
  
.proj5 { grid-area: proj5; }
  
.proj6 { grid-area: proj6; }
  
.proj7 { grid-area: proj7; }
  
.proj8 { grid-area: proj8; }
  
.proj9 { grid-area: proj9; }
  
.proj10 { grid-area: proj10; }
  
.proj11 { grid-area: proj11; }
  
.proj12 { grid-area: proj12; }
  
.proj13 { grid-area: proj13; }
  
.proj14 { grid-area: proj14; }
  
.proj15 { grid-area: proj15; }
  
.proj16 { grid-area: proj16; }





/* Media Querries */

@media (max-width: 1053px){

    .projects-wrapper { 
        min-height: 40em;
        max-width: 1115px;
        padding: 4.3em 0em;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    
        display: grid;
        grid-template-columns: 220px 220px 220px;
        grid-template-rows: 220px 220px 220px 220px 220px 220px 220px;
        gap: 15px 15px;
        grid-auto-flow: column;
        grid-template-areas:
          "proj1 proj1 proj2"
          "proj3 proj4 proj5"
          "proj6 proj7 proj7"
          "proj8 proj9 proj10"
          "proj11 proj12 proj13"
          "proj14 proj15 proj16"
          "proj17 proj18 proj19";
    }

}


@media (max-width: 722px){

    .projects-wrapper { 
        min-height: 40em;
        max-width: 1115px;
        padding: 4.3em 0em;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        display: grid;
        grid-template-columns: 180px 180px ;
        grid-template-rows: 180px 180px 180px 180px 180px 180px 180px 180px 180px 180px 180px;
        gap: 15px 15px;
        grid-auto-flow: column;
        grid-template-areas:
          "proj1 proj1"
          "proj2 proj3"
          "proj4 proj5"
          "proj7 proj7"
          "proj6 proj8"
          "proj9 proj10"
          "proj11 proj12"
          "proj13 proj14"
          "proj15 proj16"
          "proj17 proj17"
          "proj18 proj19";
    }


}


@media (max-width: 900px){
    .grid-overlay-text{
        font-size: .7em;
    }

}