1675

اترك تعليقاً / بواسطة admin / مايو 26, 2026

<style>
.related-reading{
  direction:rtl;
  margin:55px auto 20px;
  padding:30px 18px;
  background:#f5fbfc;
  border-radius:28px;
  font-family:inherit;
}
.related-reading h2{
  text-align:center;
  color:#10233e;
  font-size:28px;
  margin-bottom:25px;
}
.related-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:15px;
}
.related-card{
  min-width:260px;
  background:white;
  border-radius:22px;
  padding:18px;
  text-decoration:none!important;
  color:#10233e;
  box-shadow:0 12px 30px rgba(7,151,173,.10);
  scroll-snap-align:start;
  border:1px solid rgba(7,151,173,.10);
}
.related-card img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:14px;
}
.related-card h3{
  font-size:18px;
  line-height:1.6;
  margin:0;
  color:#10233e;
}
.post-nav-custom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:28px;
}
.post-nav-custom a{
  background:white;
  border-radius:18px;
  padding:18px;
  text-decoration:none!important;
  color:#0797ad;
  font-weight:800;
  box-shadow:0 10px 25px rgba(7,151,173,.09);
}
@media(max-width:767px){
  .post-nav-custom{grid-template-columns:1fr;}
}
</style>

<div class="related-reading">
  <h2>مقالات قد تهمك</h2>

  <div class="related-scroll">
    [display-posts posts_per_page="6" image_size="medium" orderby="rand"]
  </div>

  <div class="post-nav-custom">
    <div>
      المقال السابق:
      <br>
      [previous_post_link]
    </div>

    <div>
      المقال الموالي:
      <br>
      [next_post_link]
    </div>
  </div>
</div>