.page-header-photo{
  background:
    linear-gradient(rgba(22,34,79,0.78), rgba(22,34,79,0.78)),
    url('img/contact/about.JPG') center 65%/cover no-repeat;
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  background:var(--paper);
}

.project{
  background:var(--paper);
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}


.project:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}

.project img{
  position:absolute; inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.35s ease;
}

.project:hover img{
  transform:scale(1.08);
}

.project::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:65%;
  background:linear-gradient(to top, rgba(10,10,10,0.78), transparent);
  pointer-events:none;
}

.project .caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:18px 20px;
  color:var(--paper);
  z-index:1;
}

.project .caption .loc{font-size:12px; color:var(--zinc); letter-spacing:0.4px; margin-bottom:4px;}
.project .caption .name{font-family:'Oswald'; font-size:17px; font-weight:500;}

@media (max-width:860px){
  .project-grid{grid-template-columns:1fr;}
}