---
import quoteBg from '../../assets/img/quote-bg.jpg';
---
<section class="quote" style={`background-image:url(${quoteBg.src})`}>
  <div class="container quote__in">
    <p class="quote__mark">“</p>
    <blockquote>
      <p><strong>PERFORMANCE</strong> È SPINGERE OLTRE I PROPRI LIMITI, <strong>BALANCE</strong> È SAPERLI ASCOLTARE, <strong>LONGEVITY</strong> È COSTRUIRE NEL TEMPO CIÒ CHE DAVVERO CONTA.</p>
      <cite>Insanitylab</cite>
    </blockquote>
  </div>
</section>

<style>
  .quote { position: relative; background-size: cover; background-position: center; text-align: center; }
  .quote::before { content: ''; position: absolute; inset: 0; background: rgba(46,32,24,.82); }
  .quote__in { position: relative; padding-block: 110px; max-width: 820px; }
  .quote__mark { color: #fff; font-size: 4rem; font-family: var(--font-heading); margin: 0; line-height: 1; }
  .quote blockquote { margin: 0; }
  .quote blockquote p { color: #fff; font-family: var(--font-heading); font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: .06em; line-height: 1.6; }
  .quote cite { display: block; margin-top: 24px; color: var(--c-accent); font-style: normal; font-family: var(--font-heading); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; }
</style>