.posts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.post{
  display:grid;grid-template-columns:110px 1fr auto;
  gap:28px;align-items:baseline;
  padding:26px 6px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
  transition:.35s var(--ease);position:relative;
}
.post::before{
  content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);
  width:2px;height:0;background:var(--cyan);
  transition:height .35s var(--ease);
}
.post:hover{padding-left:22px}
.post:hover::before{height:56%}
.post-date{
  font-family:var(--mono);font-size:11.5px;
  color:var(--dim);letter-spacing:.5px;
}
.post-title{
  font-size:17.5px;font-weight:650;
  letter-spacing:-.02em;margin-bottom:7px;
  transition:color .3s;
}
.post:hover .post-title{color:var(--cyan)}
.post-ex{font-size:13.8px;color:var(--muted);line-height:1.75}
.post-read{
  font-family:var(--mono);font-size:11px;
  color:var(--dim);white-space:nowrap;
}
@media(max-width:980px){
  .post{grid-template-columns:1fr;gap:8px}
  .post-read{display:none}
}