.page{
  padding:110px 18px 44px;
  max-width:1100px;
  margin:0 auto;
}
.h{
  font-size:28px;
  margin:0 0 8px;
}
.sub{color:var(--muted); margin:0 0 22px; font-size:13px; line-height:1.5}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.tile{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background: rgba(10,12,18,.35);
  transition: transform .2s ease, border-color .2s ease;
}
.tile:hover{
  transform: translateY(-3px);
  border-color: rgba(210,225,255,.28);
}
.thumb{
  aspect-ratio: 4/3;
  background-size: cover;
  background-position:center;
  filter: saturate(1.05);
}
.cap{
  padding:12px 12px 14px;
}
.t{font-size:13px; letter-spacing:.02em}
.m{font-size:12px; color:var(--muted); margin-top:6px}

@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 640px){
  .grid{grid-template-columns: 1fr;}
}