Three blog post cards

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Three blog post cards</title>
  <style>
    body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#14233a;background:#f6f8fb}
    .posts{max-width:1160px;margin:0 auto;padding:76px 24px}
    .head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 36px}
    .head div{max-width:620px}
    h2{margin:0 0 12px;font-size:38px;line-height:1.12;letter-spacing:-.03em}
    .intro{margin:0;color:#5b6b82;font-size:16.5px;line-height:1.8}
    .all{display:inline-block;padding:12px 20px;border:1px solid #cfd8e5;border-radius:9px;background:#fff;color:#14233a;text-decoration:none;font-weight:700;font-size:14.5px;white-space:nowrap}
    .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .post{border:1px solid #e3e9f1;border-radius:14px;background:#fff;overflow:hidden}
    .post img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#e3e9f1}
    .body{padding:22px 24px 26px}
    .cat{margin:0 0 10px;color:#ff5b35;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
    .post h3{margin:0 0 10px;font-size:19px;line-height:1.35;letter-spacing:-.01em}
    .excerpt{margin:0 0 16px;color:#5b6b82;font-size:14.5px;line-height:1.75}
    .more{margin:0;font-size:14.5px;font-weight:700}
    .more a{color:#14233a}
    @media(max-width:780px){.posts{padding:54px 20px}h2{font-size:29px}.head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:28px}.grid{grid-template-columns:1fr;gap:18px}.body{padding:20px 20px 22px}}
  </style>
</head>
<body>
  <section class="posts">
    <div class="head">
      <div>
        <h2>From the nursery journal</h2>
        <p class="intro">Short, practical guides from the Willowbank growing team, written for the plants we actually sell.</p>
      </div>
      <a class="all" href="#journal">Browse all articles</a>
    </div>
    <div class="grid">
      <article class="post">
        <img src="https://htmltoelementor.com/wp-content/uploads/hte-library/modules-b/post-seedlings.jpg" width="1600" height="1000" alt="Trays of young tomato and pepper seedlings on a wooden bench outside a greenhouse">
        <div class="body">
          <p class="cat">Planting</p>
          <h3>When to move seedlings outdoors</h3>
          <p class="excerpt">Night temperatures matter more than the date on the calendar. A week-long hardening routine that prevents transplant shock.</p>
          <p class="more"><a href="#seedlings">Read the guide →</a></p>
        </div>
      </article>
      <article class="post">
        <img src="https://htmltoelementor.com/wp-content/uploads/hte-library/modules-b/post-leaf-mould.jpg" width="1600" height="1000" alt="Hands holding dark crumbly leaf mould above a wire mesh cage filled with decomposing leaves">
        <div class="body">
          <p class="cat">Soil care</p>
          <h3>Making leaf mould from one autumn of leaves</h3>
          <p class="excerpt">No bin needed: a wire cage, a season of rain and a few turns give you a crumbly mulch by next spring.</p>
          <p class="more"><a href="#leaf-mould">Read the guide →</a></p>
        </div>
      </article>
      <article class="post">
        <img src="https://htmltoelementor.com/wp-content/uploads/hte-library/modules-b/post-pruning.jpg" width="1600" height="1000" alt="Gardener in leather gloves cutting a stem of a flowering shrub with bypass pruners">
        <div class="body">
          <p class="cat">Pruning</p>
          <h3>Pruning summer shrubs without losing next year’s flowers</h3>
          <p class="excerpt">Some shrubs flower on this year’s growth and some on last year’s. How to tell which you have before you cut.</p>
          <p class="more"><a href="#pruning">Read the guide →</a></p>
        </div>
      </article>
    </div>
  </section>
</body>
</html>