Testimonial 02

<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="testimonial_component">
  <div class="testimonial_inner">
    <div class="testimonial_lead">
      <p class="testimonial_tag">Verified buyer</p>
      <h2 class="testimonial_quote">“Three washes in and it still looks brand new — the fit is unreal.”</h2>
      <div class="testimonial_author">
        <img class="testimonial_avatar" alt="Portrait of Marcus Reyon" />
        <div class="testimonial_authormeta">
          <p class="testimonial_name">Marcus Reyon</p>
          <p class="testimonial_role">Ordered the Everyday Merino Crew</p>
        </div>
      </div>
    </div>
    <div class="testimonial_ratingcard">
      <p class="testimonial_score">4.9</p>
      <ul class="testimonial_stars">
        <li class="testimonial_star">★</li>
        <li class="testimonial_star">★</li>
        <li class="testimonial_star">★</li>
        <li class="testimonial_star">★</li>
        <li class="testimonial_star">★</li>
      </ul>
      <p class="testimonial_ratingmeta">Based on 2,140 verified reviews</p>
      <a class="testimonial_link" href="#reviews">Read all reviews →</a>
    </div>
  </div>
</section>

<style>
.testimonial_component {
  position:relative;
  width:100%;
  background-color:#7a1420;
  padding:120px 24px;
  overflow:hidden;
  font-family:'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}

.testimonial_inner {
  position:relative;
  z-index:10;
  margin:0 auto;
  display:grid;
  width:100%;
  max-width:1180px;
  grid-template-columns:1fr;
  gap:64px;
  align-items:end;
}

.testimonial_lead {
  display:flex;
  flex-direction:column;
}

.testimonial_tag {
  display:inline-flex;
  width:fit-content;
  margin:0 0 40px 0;
  background-color:#ffd400;
  color:#7a1420;
  padding:8px 16px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.testimonial_quote {
  margin:0;
  max-width:15ch;
  color:#ffffff;
  font-size:64px;
  line-height:0.98;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.testimonial_author {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:48px;
}

.testimonial_avatar {
  width:64px;
  height:64px;
  border-radius:9999px;
  object-fit:cover;
  border:2px solid #ffd400;
  flex-shrink:0;
}

.testimonial_authormeta {
  display:flex;
  flex-direction:column;
}

.testimonial_name {
  margin:0;
  color:#ffffff;
  font-size:18px;
  font-weight:700;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.testimonial_role {
  margin:0;
  color:#e6a5ad;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.testimonial_ratingcard {
  display:flex;
  flex-direction:column;
  gap:24px;
  background-color:#2a0a0f;
  padding:40px;
  box-sizing:border-box;
}

.testimonial_score {
  margin:0;
  color:#ffd400;
  font-size:64px;
  line-height:1;
  font-weight:800;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.testimonial_stars {
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:4px;
  color:#ffd400;
  font-size:24px;
}

.testimonial_star {
  line-height:1;
}

.testimonial_ratingmeta {
  margin:0;
  color:#c98a91;
  font-size:13px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

.testimonial_link {
  display:inline-flex;
  width:fit-content;
  margin-top:8px;
  color:#ffffff;
  font-size:16px;
  font-weight:700;
  padding-bottom:4px;
  border-bottom:2px solid #ffd400;
  text-decoration:none;
  font-family:'Helvetica Neue',Arial,sans-serif;
}
</style>