<style>
  .recentCard .img-fluid {
    height: 200px;
  }
  .button_dec {
    border: 3px solid var(--color-primary);
    border-radius: 50px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: "muli";
    background-color: var(--color-primary);
    color: #fff;
    font-size: 1rem;
    margin: 3rem 2px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-decoration: none;
  }
  .button_dec:hover {
    color: #fff;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }
</style>

<div>
  <div class="recentCard">
    <% for(let i = 0;i < recentPosts.length;i++){ %>
    <div class="card">
      <img
        class="img-fluid pointer"
        src="/media/<%-recentPosts[i].image%>"
        alt=""
      />
      <div class="card-body">
        <a href="/blog/<%-recentPosts[i].url%>" class="content_title">
          <%-recentPosts[i].title%>
        </a>
        <a href="/blog/<%-recentPosts[i].url%>" class="content_cont">
          <%-recentPosts[i].subcontent%>
        </a>
      </div>
      <div class="text-center btm_space">
        <a class="bottom_link" href="/blog/<%-recentPosts[i].url%>"
          >CLICK TO READ MORE</a
        >
      </div>
    </div>
    <% } %>
  </div>
  <div class="text-center">
    <a class="text-center button_dec" href="/our-blog">More Blogs...</a>
  </div>
</div>
