.recp-recommendations { margin: 60px 0 40px; padding-top: 30px; border-top: 1px solid #ddd; }
.recp-recommendations h3 { font-size: 24px; margin-bottom: 20px; }
.recp-posts { display:flex; gap:20px; flex-wrap:wrap; }
.recp-post { width:100%; max-width:32%; text-align:center; transition:all .3s ease; }
.recp-post img { width:100%; height:auto; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.1); transition:transform .3s ease; }
.recp-post:hover img { transform:scale(1.03); }
.recp-post-title { margin-top:10px; font-size:18px; }

/* existing styles kept */
.recp-posts { display:flex; gap:20px; flex-wrap:wrap; }
.recp-post  { width:100%; max-width:32%; text-align:center; }

/* --- Mobile responsiveness: phones = single column --- */
@media (max-width: 600px) {
  .recp-posts {
    display: flex;
    flex-direction: column;  /* stack cards */
    gap: 16px;
  }
  .recp-post {
    max-width: 100%;         /* full width on phones */
    width: 100%;
    text-align: left;         /* optional: feels cleaner on mobile */
  }
  .recp-post a { display: block; }
}