@import url('https://fonts.googleapis.com/css?family=Inconsolata|Merriweather');

 button {
   cursor: pointer;
}
 #portfolio {
   width: 100%;
   min-height: 150vh;
   background: #fff;
   position: relative;
   display: grid;
   grid-template-columns: repeat(4, minmax(200px, 1fr));
   grid-template-rows: 1fr 1fr 1fr;
   grid-gap: 2px;
   font-family: 'Inconsolata', monospace;
}
 .project {
   position: relative;
   background: black;
   overflow: hidden;
}
 .project img {
   position: absolute;
   opacity: 0.8;
}
 .project p {
   position: absolute;
   text-align: center;
   width: 100%;
   padding: 1em 0;
   text-transform: uppercase;
   letter-spacing: 2px;
   z-index: 3;
   color: white;
}
 .project .grid__title {
   position: absolute;
   width: 100%;
   text-align: center;
   white-space: nowrap;
   bottom: 0;
   font-weight: 100;
   font-size: 0.8em;
   z-index: 3;
   text-transform: uppercase;
   color: #474545;
   letter-spacing: 2px;
}
 .project:hover .grid__overlay {
   transform: translateY(0%);
}
 .grid__overlay {
   background: rgb(74 107 167 / 70%);
   height: 100%;
   grid-column: -1;
   grid-row: -1;
   position: relative;
   display: grid;
   justify-items: center;
   align-items: center;
   transform: translateY(101%);
   transition: all 0.3s ease-in-out;
}
 .grid__overlay button {
   background: none;
   outline: none;
   font-weight: 100;
   letter-spacing: 2px;
   border: 1px solid #fff;
   color: #fff;
   text-transform: uppercase;
   padding: 10px;
}
 .grid__overlay button:hover {
   transition: all 0.3s ease-in-out;
   background: #fff;
   color: #d1a39e;
   transform: scale(1.05);
}
 .overlay {
   position: fixed;
   background: rgba(71, 69, 69, 0.7);
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
   z-index: 3;
}
 .overlay.open {
   display: grid;
   align-items: center;
   justify-items: center;
}
 .overlay__inner {
   background: #fff;
   width: 700px;
   padding: 20px;
   position: relative;
   opacity: 1;
}
 .close {
   position: absolute;
   top: 3px;
   right: 10px;
   background: none;
   outline: 0;
   color: #474545;
   border: 0;
   text-transform: uppercase;
   letter-spacing: 2px;
}
 .close:hover {
   color: #d1a39e;
}
 .project__image {
   margin-left: -40%;
}



@media only screen and (max-width: 900px) {
  
#portfolio {
      width: 100%;
    min-height: 39vh;
    /* background: #fff; */
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(22%, 1fr));
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 2px;
    font-family: 'Inconsolata', monospace;
    margin-top: 135px;
    font-size: 10px;
}

.project img {
      position: absolute;
    opacity: 0.8;
    /* zoom: revert; */
    /* transform: scale(0.9); */
    width: 25vh;
}
.project__image{
    margin-left: 0%;}
}
  }