Testimonials

<section class="quotes">
  <h2>What people say</h2>
  <p class="sub">From teams shipping on Acme every day.</p>

  <div class="grid">

    <figure>
      <blockquote>
        <p>We replaced four separate tools with this. The part I did not expect was how much time we got
        back from not maintaining the glue between them.</p>
      </blockquote>
      <figcaption>
        <img src="https://placehold.co/80x80/3b4fe4/ffffff?text=PR" alt="">
        <span><strong>Priya Raman</strong> Head of platform, Northwind</span>
      </figcaption>
    </figure>

    <figure class="wide">
      <blockquote>
        <p>Our deploy went from eleven minutes to under forty seconds. I checked three times because
        I did not believe it.</p>
      </blockquote>
      <figcaption>
        <img src="https://placehold.co/80x80/1f8a5b/ffffff?text=TO" alt="">
        <span><strong>Tomás Oliveira</strong> Staff engineer, Lumen</span>
      </figcaption>
    </figure>

    <figure>
      <blockquote>
        <p>The documentation is the reason we chose it. Everything I needed was on the page I was
        already looking at.</p>
      </blockquote>
      <figcaption>
        <img src="https://placehold.co/80x80/b7791f/ffffff?text=AN" alt="">
        <span><strong>Ada Nwosu</strong> CTO, Fieldwork</span>
      </figcaption>
    </figure>

  </div>
</section>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.65 system-ui, -apple-system, sans-serif; background: #f6f8fb; }

.quotes { max-width: 1080px; margin: 0 auto; padding: 56px 24px; }

.quotes h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  letter-spacing: -0.02em;
  color: #16202e;
  text-align: center;
}

.sub { text-align: center; color: #8593ab; margin-top: 8px; margin-bottom: 32px; }

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
  background: #fff;
  border: 1px solid #e2e7ef;
  border-radius: 14px;
}

/* the opening quote mark is decoration, so it belongs in CSS */
blockquote { flex: 1; position: relative; padding-top: 26px; }

blockquote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: -2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.4rem;
  line-height: 1;
  color: #d7ddec;
}

blockquote p { color: #16202e; font-size: 1rem; }

figcaption {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #eef1f6;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .86rem;
  color: #8593ab;
}

figcaption img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
figcaption strong { display: block; font-weight: 600; color: #16202e; font-size: .92rem; }

/* one quote gets more room, which stops the grid looking like a spreadsheet */
.wide { grid-column: span 2; }
.wide blockquote p { font-size: 1.12rem; }

@media (max-width: 900px) {
  .wide { grid-column: auto; }
}