function About() {
  return (
    <>
      <section>
        <div className="wrap">
          <div className="about-hero">
            <div
              className="photo"
              style={{ backgroundImage: `url(${IMG.aboutHero})` }}
              role="img"
              aria-label="Charlie Provenza with mandolin"
            />
            <div className="content">
              <div className="mono" style={{ marginBottom: 18, color: "var(--accent)" }}>About Charlie
              </div>
              <h1>A mandolinist's<br /><em>thirty-five years.</em></h1>
              <p style={{ color: "var(--ink-2)", fontSize: 19, marginTop: 28 }}>
                Charlie Provenza has been quietly shaping the sound of Colorado live music
                since the late 1980s, as a National Mandolin Champion, a six-time Telluride
                winner, and a featured voice in Mel Bay's <em>Mandolin 2000</em> and
                <em> Winfield Winners</em>.
              </p>
            </div>
          </div>

          <div className="credits">
            <div className="credit">
              <div className="num">1×</div>
              <div className="lab">National Mandolin Champion</div>
            </div>
            <div className="credit">
              <div className="num">6×</div>
              <div className="lab">Telluride Contest Winner</div>
            </div>
            <div className="credit">
              <div className="num">35</div>
              <div className="lab">Years in Colorado</div>
            </div>
            <div className="credit">
              <div className="num">4</div>
              <div className="lab">Active Projects & Bands</div>
            </div>
          </div>

          <div className="bio-grid">
            <aside className="side">
              <span className="mono">Based in</span>
              <h3>Colorado,<br />Front Range</h3>
              <span className="mono" style={{ display: "block", marginTop: 24 }}>Plays</span>
              <h3 style={{ marginTop: 6 }}>Mandolin<br />& Guitar</h3>
              <span className="mono" style={{ display: "block", marginTop: 24 }}>Has shared stages with</span>
              <p style={{ marginTop: 6, fontSize: 15, color: "var(--ink-2)" }}>
                Aspen Music Festival<br />
                The Colorado Symphony<br />
                The Wild Jimbos<br />
                and his own groups.
              </p>
            </aside>
            <div className="body">
              <p>
                A one-time National Mandolin Champion and six-time Telluride Mandolin
                Contest winner, Charlie has performed with the Aspen Music Festival,
                the Colorado Symphony, the Wild Jimbos, and his own groups. His playing
                sits comfortably at the hinge between Appalachian tradition and
                European lyricism, a rare thing for a single player to carry.
              </p>
              <p>
                He is a featured author in Mel Bay's <em>Mandolin 2000</em> and
                <em> Winfield Winners</em>, and his bands, Mandolin Ranch and Gypsy
                Mandolin, have played countless weddings, corporate gatherings and
                public concerts across the Front Range and beyond.
              </p>
              <p>
                Mandolin Ranch is a band that folds together rock, country, bluegrass,
                blues, Irish, gypsy, jazz and classical music. It can be a duo over
                drinks or a full five-piece over a dance floor. Gypsy Mandolin is a
                longstanding duo with guitarist Gordon Schrag, Italian, European,
                classical and more, for quieter rooms that deserve quieter music.
              </p>
              <p>
                Thirty-five years in, Charlie's still looking for the same thing he
                was looking for at the beginning: the sound of a room leaning in.
              </p>
            </div>
          </div>

          <Ornament sym="✦ ✦ ✦" />

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, margin: "40px 0 80px" }}>
            <div
              style={{
                aspectRatio: "4/3",
                backgroundImage: `url(${IMG.aboutSide})`,
                backgroundSize: "cover",
                backgroundPosition: "center",
                borderRadius: 4,
                filter: "saturate(0.88) contrast(1.02)",
              }}
            />
            <div
              style={{
                aspectRatio: "4/3",
                backgroundImage: `url(${IMG.live4})`,
                backgroundSize: "cover",
                backgroundPosition: "center",
                borderRadius: 4,
                filter: "saturate(0.88) contrast(1.02)",
              }}
            />
          </div>
        </div>
      </section>
    </>
  );
}

window.About = About;