Stats Band 01

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="stats_component">
  <div class="stats_inner">
    <div class="stats_head">
      <p class="stats_eyebrow">By the numbers</p>
      <h2 class="stats_title">Built for the ones who ship, sell, and never slow down.</h2>
    </div>
    <ul class="stats_grid">
      <li class="stats_cell">
        <p class="stats_number">2.4M</p>
        <p class="stats_label">Orders shipped</p>
      </li>
      <li class="stats_cell">
        <p class="stats_number">98%</p>
        <p class="stats_label">On-time delivery</p>
      </li>
      <li class="stats_cell">
        <p class="stats_number">140+</p>
        <p class="stats_label">Countries served</p>
      </li>
      <li class="stats_cell">
        <p class="stats_number">4.9</p>
        <p class="stats_label">Avg. rating</p>
      </li>
    </ul>
  </div>
</section>

<style>
.stats_component {
  width:100%;
  background-color:#7a1420;
  padding:6rem 1.5rem;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
  overflow:hidden;
}

.stats_inner {
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:4rem;
}

.stats_head {
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  max-width:640px;
}

.stats_eyebrow {
  display:inline-flex;
  align-self:flex-start;
  background-color:#ffd400;
  color:#7a1420;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  padding:6px 14px;
  border-radius:999px;
  margin:0;
}

.stats_title {
  color:#ffffff;
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800;
  text-transform:uppercase;
  line-height:0.95;
  letter-spacing:-0.02em;
  margin:0;
  font-family:'Arial Narrow',Arial,sans-serif;
}

.stats_grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background-color:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.1);
  list-style:none;
  padding:0;
  margin:0;
}

.stats_cell {
  background-color:#7a1420;
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:2rem;
}

.stats_number {
  color:#ffffff;
  font-size:clamp(3.5rem,7vw,5.5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.03em;
  margin:0;
  font-family:'Arial Narrow',Arial,sans-serif;
}

.stats_label {
  display:inline-flex;
  align-self:flex-start;
  background-color:#ffd400;
  color:#7a1420;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.12em;
  padding:4px 10px;
  border-radius:999px;
  margin:0;
}
</style>