Blog List 03

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="blog_component">
  <div class="blog_inner">
    <div class="blog_head">
      <div class="blog_headtext">
        <p class="blog_eyebrow">The Journal</p>
        <h2 class="blog_title">Notes on living gently</h2>
      </div>
      <a class="blog_viewall" href="#">View all stories →</a>
    </div>
    <div class="blog_grid">
      <a class="blog_card" href="#">
        <img class="blog_cardimg" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-blog-list-forest-organic-3-1-12.webp" alt="Hands holding moss and soil" />
        <div class="blog_cardbody">
          <p class="blog_cat">Regeneration</p>
          <h3 class="blog_cardtitle">Building soil that heals the land</h3>
          <p class="blog_excerpt">How regenerative farms rebuild carbon-rich earth season after season — and why patience is the real fertilizer.</p>
          <p class="blog_date">March 14, 2026</p>
        </div>
      </a>
      <a class="blog_card" href="#">
        <img class="blog_cardimg" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-blog-list-forest-organic-3-2-13.webp" alt="Herbal tea and dried botanicals" />
        <div class="blog_cardbody">
          <p class="blog_cat">Wellness</p>
          <h3 class="blog_cardtitle">A slower morning ritual, by design</h3>
          <p class="blog_excerpt">Trading the scroll for stillness. Three grounding habits that make the first hour feel like it belongs to you again.</p>
          <p class="blog_date">March 02, 2026</p>
        </div>
      </a>
      <a class="blog_card" href="#">
        <img class="blog_cardimg" src="https://pub-8060008fc1ab494c98adf87ab62286c4.r2.dev/assets/inspiration/section-blog-list-forest-organic-3-3-14.webp" alt="Folded organic cotton textiles" />
        <div class="blog_cardbody">
          <p class="blog_cat">Materials</p>
          <h3 class="blog_cardtitle">What makes a fabric truly circular</h3>
          <p class="blog_excerpt">From fiber to compost heap. We trace one organic cotton throw across its whole honest lifecycle — no greenwashing.</p>
          <p class="blog_date">February 19, 2026</p>
        </div>
      </a>
    </div>
  </div>
</section>

<style>
.blog_component {
  width:100%;
  background-color:#07221d;
  padding:7rem 1.5rem;
  box-sizing:border-box;
  font-family:Inter,system-ui,-apple-system,sans-serif;
}

.blog_inner {
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:3.5rem;
}

.blog_head {
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}

.blog_headtext {
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:560px;
}

.blog_eyebrow {
  color:#8fe388;
  font-size:0.8rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:500;
  margin:0;
}

.blog_title {
  color:#f4f7f2;
  font-family:Georgia,'Times New Roman',serif;
  font-size:2.9rem;
  line-height:1.08;
  font-weight:300;
  margin:0;
  letter-spacing:-0.01em;
}

.blog_viewall {
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  color:#8fe388;
  font-size:0.95rem;
  text-decoration:none;
  border:1px solid #2c5147;
  border-radius:999px;
  padding:0.75rem 1.4rem;
  transition:background-color .25s,border-color .25s;
}

.blog_grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}

.blog_card {
  display:flex;
  flex-direction:column;
  background-color:#0b2c25;
  border:1px solid #123c33;
  border-radius:24px;
  padding:1rem;
  text-decoration:none;
  transition:transform .3s ease,border-color .3s ease;
}

.blog_cardimg {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

.blog_cardbody {
  display:flex;
  flex-direction:column;
  gap:0.85rem;
  padding:1.25rem 0.75rem 0.75rem;
}

.blog_cat {
  color:#8fe388;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
  margin:0;
}

.blog_cardtitle {
  color:#f4f7f2;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.35rem;
  line-height:1.25;
  font-weight:400;
  margin:0;
}

.blog_excerpt {
  color:#a9c4ba;
  font-size:0.95rem;
  line-height:1.6;
  margin:0;
}

.blog_date {
  color:#6f9086;
  font-size:0.82rem;
  margin:0.5rem 0 0;
}
</style>