Features Grid 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="features_component">
  <div class="features_inner">
    <div class="features_head">
      <p class="features_meta">The Maison Standard</p>
      <h2 class="features_title">
        <span class="features_title_accent">considered</span>
        <span class="features_title_rest"> in every detail.</span>
      </h2>
      <p class="features_sub">We measure quality not by what is added, but by what remains after everything unnecessary is removed.</p>
    </div>
    <ul class="features_grid">
      <li class="features_card">
        <div class="features_num">
          <p class="features_num_txt">01</p>
        </div>
        <h3 class="features_card_title">Single-Origin Materials</h3>
        <p class="features_card_desc">Every hide, fibre and finish is traced to a single named source — chosen for character, not convenience.</p>
      </li>
      <li class="features_card">
        <div class="features_num">
          <p class="features_num_txt">02</p>
        </div>
        <h3 class="features_card_title">Made by Named Hands</h3>
        <p class="features_card_desc">A single artisan sees each piece from cut to finish, signing the work they are proud to call their own.</p>
      </li>
      <li class="features_card">
        <div class="features_num">
          <p class="features_num_txt">03</p>
        </div>
        <h3 class="features_card_title">Kept, Not Consumed</h3>
        <p class="features_card_desc">Designed to be repaired, patinated and passed on — a lifetime guarantee written into the making itself.</p>
      </li>
      <li class="features_card">
        <div class="features_num">
          <p class="features_num_txt">04</p>
        </div>
        <h3 class="features_card_title">Quiet by Design</h3>
        <p class="features_card_desc">No monograms, no loud hardware — only proportion, weight and restraint that speak on close inspection.</p>
      </li>
      <li class="features_card">
        <div class="features_num">
          <p class="features_num_txt">05</p>
        </div>
        <h3 class="features_card_title">Made to Order</h3>
        <p class="features_card_desc">Nothing is warehoused. Each order begins the day it is placed, ending the waste of what is never worn.</p>
      </li>
      <li class="features_card">
        <div class="features_num">
          <p class="features_num_txt">06</p>
        </div>
        <h3 class="features_card_title">A Standing Invitation</h3>
        <p class="features_card_desc">Return any piece for restoration for as long as you own it — our workshop remains open to you, always.</p>
      </li>
    </ul>
  </div>
</section>

<style>
.features_component {
  background-color:#faf8f4;
  padding:120px 6vw;
  font-family:Georgia,'Times New Roman',serif;
  color:#1c1a17;
}

.features_inner {
  max-width:1200px;
  margin:0 auto;
}

.features_head {
  max-width:720px;
  margin:0 auto 80px;
  text-align:center;
}

.features_meta {
  font-family:Georgia,serif;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:#a67c52;
  margin:0 0 24px;
}

.features_title {
  font-family:Georgia,'Times New Roman',serif;
  font-size:52px;
  line-height:1.08;
  font-weight:400;
  color:#1c1a17;
  margin:0;
}

.features_title_accent {
  font-style:italic;
  color:#a67c52;
}

.features_sub {
  font-family:Georgia,serif;
  font-size:17px;
  line-height:1.7;
  color:#6b6459;
  margin:24px 0 0;
}

.features_grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background-color:#e6ded2;
  list-style:none;
  padding:0;
  margin:0;
  border:1px solid #e6ded2;
}

.features_card {
  background-color:#faf8f4;
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.features_num {
  width:56px;
  height:56px;
  border-radius:50%;
  border:1px solid #a67c52;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:32px;
}

.features_num_txt {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:20px;
  color:#a67c52;
  margin:0;
}

.features_card_title {
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:400;
  color:#1c1a17;
  margin:0 0 16px;
}

.features_card_desc {
  font-family:Georgia,serif;
  font-size:15px;
  line-height:1.75;
  color:#6b6459;
  margin:0;
}
</style>