.projects-main{
  padding:150px 40px 100px;
  max-width:1400px;
  margin:0 auto;
}

.projects-title{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:clamp(32px, 5vw, 56px);
  margin-bottom:60px;
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2px;
}

.project-tile{
  position:relative;
  aspect-ratio:16/10;
  border:none;
  padding:0;
  background:#111;
  overflow:hidden;
  cursor:none;
  text-align:left;
  font-family:inherit;
  color:var(--fg);
}

.tile-img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:grayscale(.5) brightness(.65);
  transform:scale(1.04);
  transition:transform 1.1s var(--ease), filter .6s ease;
}
.project-tile:hover .tile-img{
  filter:grayscale(0) brightness(.8);
  transform:scale(1.1);
}

.tile-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.8);
  font-size:14px;
  width:56px; height:56px;
  border:1px solid rgba(245,244,240,.5);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.project-tile:hover .tile-play{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

.tile-info{
  position:absolute;
  left:24px; bottom:22px;
  display:flex; flex-direction:column; gap:6px;
}
.tile-title{
  font-family:'Cormorant Garamond', serif;
  font-size:22px;
}
.tile-client{
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent);
}

.project-tile--ig{
  background:linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}
.tile-ig-icon{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-70%);
  color:rgba(245,244,240,.35);
  transition:color .4s ease, transform .4s var(--ease);
}
.project-tile--ig:hover .tile-ig-icon{
  color:rgba(245,244,240,.7);
  transform:translate(-50%,-85%);
}
.project-tile--ig .tile-play{
  top:auto;
  bottom:36%;
  left:50%;
  transform:translate(-50%,0) scale(.8);
}
.project-tile--ig:hover .tile-play{
  transform:translate(-50%,0) scale(1);
}
.project-tile--ig .tile-info{
  left:0; right:0; bottom:22px;
  align-items:center;
  text-align:center;
}

.project-tile--soon{
  display:flex;
  align-items:flex-end;
  background:#0f0f0f;
  border:1px dashed rgba(245,244,240,.15);
}
.tile-info--soon .tile-title{ color:rgba(245,244,240,.4); }
.tile-info--soon .tile-client{ color:rgba(245,244,240,.25); }

@media (max-width:820px){
  .projects-grid{ grid-template-columns:1fr; }
  .projects-main{ padding:130px 24px 80px; }
}