{{- $c := site.Data.content -}}
<section class="reviews frame" id="reviews" aria-labelledby="reviews-title">
    <div class="gap"></div>
    <div class="rv-head">
      <h2 id="reviews-title">{{ $c.reviews.h2_1 }}</h2>
      <p class="score">{{ $c.reviews.p_2_html | safeHTML }}</p>
      <div class="stars" aria-label="5 out of 5 stars"><svg aria-hidden="true"><use href="#i-star" /></svg><svg aria-hidden="true"><use href="#i-star" /></svg><svg aria-hidden="true"><use href="#i-star" /></svg><svg aria-hidden="true"><use href="#i-star" /></svg><svg aria-hidden="true"><use href="#i-star" /></svg></div>
      <a href="#reviews" data-count>{{ $c.reviews.a_3 }}</a>
      <button class="pill" type="button" data-review-open>{{ $c.reviews.button_4 }}</button>
    </div>
    <div class="rv-slider">
      <div class="quote" aria-live="polite" data-quotes>
        <figure class="q on"><p>{{ $c.reviews.p_5 }}</p><cite>{{ $c.reviews.cite_6 }}</cite></figure>
        <figure class="q"><p>{{ $c.reviews.p_7 }}</p><cite>{{ $c.reviews.cite_8 }}</cite></figure>
        <figure class="q"><p>{{ $c.reviews.p_9 }}</p><cite>{{ $c.reviews.cite_10 }}</cite></figure>
        <figure class="q"><p>{{ $c.reviews.p_11 }}</p><cite>{{ $c.reviews.cite_12 }}</cite></figure>
        <figure class="q"><p>{{ $c.reviews.p_13 }}</p><cite>{{ $c.reviews.cite_14 }}</cite></figure>
      </div>
      <div class="dots" role="group" aria-label="Choose a review" data-dots><button type="button" aria-label="Review 1" aria-current="true"></button><button type="button" aria-label="Review 2"></button><button type="button" aria-label="Review 3"></button><button type="button" aria-label="Review 4"></button><button type="button" aria-label="Review 5"></button></div>
    </div>
    <div class="gap"></div>
  </section>