Hero - Time Version

Source (Nunjucks)

<div class="layout debug-label">
  <article class="quoteWrapper">
    <div class="cardWrapper quote" data-container="true">
      <article class="cardArticle">
        <div class="cardThumb"></div>
        <hgroup class="cardContent">
          <blockquote cite="https://www.huxley.net/bnw/four.html">
            <h3 class="cardTitle">
              Enthusiasm is free, so use it
            </h3>
          </blockquote>
          <p>
            <cite class="cardSubtitle">Arthur Turner, Manager of Headington / Oxford United, early-1960s</cite>
          </p>
        </hgroup>
      </article>
    </div>
    <div class="cardWrapper quote" data-container="true">
      <article class="cardArticle">
        <div class="cardThumb"></div>
        <hgroup class="cardContent">
          <h3 class="cardTitle">Way too many people stopped growing in high school, constantly telling you about some mediocre
            shit they did 40 years ago.</h3>
          <p class="cardSubtitle">Unknown</p>
          <p class="meta"></p>
        </hgroup>
      </article>
    </div>
    <div class="cardWrapper quote" data-container="true">
      <article class="cardArticle">
        <div class="cardThumb"></div>
        <hgroup class="cardContent">
          <blockquote cite="https://www.huxley.net/bnw/four.html">
            <h3 class="cardTitle">
              Websites are fun, the internet is a gift
            </h3>
          </blockquote>
          <p>
            <cite class="cardSubtitle">Henry who codes</cite>
          </p>
        </hgroup>
      </article>
    </div>
    <div class="cardWrapper quote" data-container="true">
      <article class="cardArticle">
        <div class="cardThumb"></div>
        <hgroup class="cardContent">
          <blockquote cite="https://www.huxley.net/bnw/four.html">
            <h3 class="cardTitle">
              Websites are fun, the internet is a gift
            </h3>
          </blockquote>
          <p>
            <cite class="cardSubtitle">Henry who codes</cite>
          </p>
        </hgroup>
      </article>
    </div>
  </article>
  <article class="featureWrapper">
    <div class="cardWrapper feature" data-container="true">
      <article class="cardArticle">
        <h2 class="cardThumb"></h2>
        <hgroup class="cardContent">
          <h3 class="cardTitle">Late-Night Screen Time Tied to Sleep</h3>
          <p class="cardSubtitle">A new study finds that late-night screen time is linked to sleep problems.</p>
          <p class="meta">By John Smith</p>
        </hgroup>
      </article>
    </div>
  </article>
  <article class="recentWrapper">
    <div class="cardWrapper recent" data-container="true">
      <article class="cardArticle">
        <div class="cardThumb"></div>
        <hgroup class="cardContent">
          <h3 class="cardTitle">Health Officials Urge Caution as Heat Builds</h3>
          <p class="cardSubtitle"></p>
          <p class="meta">By John Smith</p>
        </hgroup>
      </article>
    </div>
  </article>
</div>