@use 'sprucecss/scss/spruce' as *;

.testimonial-cards {
  @include layout-grid('m', 18rem);
}

.testimonial-card {
  background-color: color('surface');
  border: config('border-width-base', $display) solid color('border');
  border-radius: radius('lg');
  display: flex;
  flex-direction: column;
  gap: spacer('m');
  margin: 0;
  padding: spacer-clamp('m', 'l');

  &__icon {
    block-size: 2rem;
    color: color('primary');
    inline-size: 2rem;
  }

  &__quote {
    border: 0;
    color: color('heading');
    flex-grow: 1;
    font-size: config('font-size-lg', $typography);
    margin: 0;
    padding: 0;
  }

  &__author {
    align-items: center;
    display: flex;
    gap: spacer('s');
    text-align: start;
  }

  &__avatar {
    block-size: 3rem;
    border-radius: 50%;
    inline-size: 3rem;
    object-fit: cover;
  }

  &__name {
    color: color('heading');
    display: block;
    font-weight: 700;
  }

  &__role {
    color: color('muted');
    display: block;
    font-size: config('font-size-sm', $typography);
  }
}

<div class="testimonial-cards">
    <figure class="testimonial-card">
        <svg class="testimonial-card__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M9.6 5C6 6.4 3.5 9.7 3.5 13.7V19h6.6v-6.4H6.8c0-2.3 1.4-4.5 3.6-5.4zm10 0c-3.6 1.4-6.1 4.7-6.1 8.7V19h6.6v-6.4h-3.3c0-2.3 1.4-4.5 3.6-5.4z"/></svg>
        <blockquote class="testimonial-card__quote">
            <p>Spruce gave our design system a backbone. We switched the whole marketing site to a new style in an afternoon.</p>
        </blockquote>
        <figcaption class="testimonial-card__author">
            <img class="testimonial-card__avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=70" alt="" width="48" height="48" loading="lazy">
            <span>
                <span class="testimonial-card__name">Maya Chen</span>
                <span class="testimonial-card__role">Design Lead, Northwind</span>
            </span>
        </figcaption>
    </figure>
    <figure class="testimonial-card">
        <svg class="testimonial-card__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M9.6 5C6 6.4 3.5 9.7 3.5 13.7V19h6.6v-6.4H6.8c0-2.3 1.4-4.5 3.6-5.4zm10 0c-3.6 1.4-6.1 4.7-6.1 8.7V19h6.6v-6.4h-3.3c0-2.3 1.4-4.5 3.6-5.4z"/></svg>
        <blockquote class="testimonial-card__quote">
            <p>The Sass helpers are a joy. Our components finally use the same spacing, colors and radii everywhere.</p>
        </blockquote>
        <figcaption class="testimonial-card__author">
            <img class="testimonial-card__avatar" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=crop&amp;w=96&amp;h=96&amp;q=70" alt="" width="48" height="48" loading="lazy">
            <span>
                <span class="testimonial-card__name">Daniel Okafor</span>
                <span class="testimonial-card__role">Frontend Engineer, Lumen</span>
            </span>
        </figcaption>
    </figure>
</div>