PicoCSS Infinite content loop

I wanted to be able to display a couple of customer quotes on my homepage. This is the HTML and CSS I used to achieve that.

HTML

<div class="container">
    <div role="tabs">
      <section>
        <input hidden="hidden" type="radio" name="tabs" id="tab1" checked="checked" />
        <figure>
          <blockquote>
            "When you're new to something, you bring an ignorance that can
            be highly innovative."
            <footer>
              <cite>– Rick Rubin</cite>
            </footer>
          </blockquote>
          <label for="tab2" role="button">Next</label>
        </figure>

        <input hidden="hidden" type="radio" name="tabs" id="tab2" />
        <figure>
          <blockquote>
            "Nothing beats a simple worldview. When we know who's the bad
            guy, the day has structure."
            <footer>
              <cite>– Volker Pispers</cite>
            </footer>
          </blockquote>
          <label for="tab1" role="button">Next</label>
        </figure>
      </section>
    </div>
  </div>

CSS

[role="tabs"] {
  display: flex;
}

[role="tabs"] section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

[role="tabs"] figure {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  display: none;
  text-align: right;
}

[role="tabs"] figure>*:not(:last-child) {
  text-align: left;
}

[role="tabs"] [type="radio"]:checked+figure {
  display: block;
}