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

.quote-block {
  padding-block: spacer-clamp('xl', 'xxl');

  &__figure {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: spacer('l');
    margin: 0 auto;
    max-inline-size: 52rem;
    text-align: center;
  }

  &__mark {
    block-size: 3rem;
    color: color('primary');
    inline-size: 3rem;
    opacity: 0.4;
  }

  &__quote {
    border: 0;
    margin: 0;
    padding: 0;

    p {
      color: color('heading');
      font-family: config('font-family-heading', $typography);
      font-size: responsive-font-size(2.5rem, 30, '2vw + 1rem');
      font-style: normal;
      font-weight: config('font-weight-heading', $typography);
      letter-spacing: -0.01em;
      line-height: 1.3;
      margin: 0;
      text-wrap: balance;
    }
  }

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

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

  &__who {
    display: flex;
    flex-direction: column;
  }

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

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

<section class="quote-block" aria-labelledby="quote-block-title">
    <div class="container">
        <div class="quote-block__inner">
            <h2 class="sr-only" id="quote-block-title">What the client says</h2>
            <figure class="quote-block__figure">
                <svg class="quote-block__mark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M3 21c3 0 7-1 7-8V5H3v8h4c0 4-2 5-4 5zm11 0c3 0 7-1 7-8V5h-7v8h4c0 4-2 5-4 5z"/></svg>
                <blockquote class="quote-block__quote">
                    <p>Nora simplified a product that had grown over ten years. Our support tickets dropped by a third, and for the first time our customers write to us to say thank you.</p>
                </blockquote>
                <figcaption class="quote-block__author">
                    <img class="quote-block__photo" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&amp;fit=crop&amp;w=160&amp;h=160&amp;q=70" alt="" width="80" height="80" loading="lazy">
                    <span class="quote-block__who">
                        <span class="quote-block__name">Jonas Berg</span>
                        <span class="quote-block__role">Chief Product Officer, Fjord Bank</span>
                    </span>
                </figcaption>
            </figure>
        </div>
    </div>
</section>