.posts { border-top: 1px solid var(--line); }
.post { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.post a {
  display: grid; grid-template-columns: clamp(120px, 17vw, 220px) 1fr auto; gap: clamp(18px, 4vw, 56px); align-items: center;
  padding: clamp(16px, 2vw, 26px) 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.post img, .post__ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-img); transition: transform .8s var(--ease); }
.post__ph { display: grid; place-items: center; background: var(--lilac); color: var(--rose-deep); font-size: 2rem; }
.post__title { display: block; margin: 0; padding: 0; color: var(--ink); font: 500 clamp(1.3rem, 2.6vw, 2.2rem) / 1.2 var(--font-d); letter-spacing: 0; text-wrap: balance; transition: color .3s; }
.post a:hover .post__title { color: var(--rose-deep); }
.post a:hover img, .post a:hover .post__ph { transform: scale(1.04) rotate(-1.5deg); }
.post a:hover .round { transform: rotate(45deg); background: var(--ink); color: #fff; }

@media (max-width: 767px) {
  .post a { grid-template-columns: 104px 1fr; }
  .post .round { display: none; }
}