/* PullQuote, editorial block with script emphasis on "family" */

function PullQuote() {
  return (
    <section className="band-cream paper" style={{ padding: "112px 0" }}>
      <div className="wrap" style={{ maxWidth: 920, margin: "0 auto", textAlign: "center" }}>
        <div style={{
          width: 44, height: 1.5, background: "var(--scd-blush-500)",
          margin: "0 auto 32px",
        }} aria-hidden="true"/>
        <blockquote style={{
          fontFamily: "var(--font-display)", fontSize: 42, fontWeight: 400,
          lineHeight: 1.25, letterSpacing: "-0.015em", color: "var(--fg-brand)",
          margin: 0,
        }} className="pullquote">
          A supplier you can call at 4 p.m. and still ship<br/>
          the same day, because this is a{" "}
          <ScriptWord size={48}>family</ScriptWord>, not a warehouse.
        </blockquote>
        <div style={{
          marginTop: 32, fontSize: 12,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--fg-muted)", fontWeight: 600,
        }}>
          The Keary family &middot; Since 1980
        </div>
      </div>
      <style>{`
        @media (max-width: 820px) { .pullquote { font-size: 30px !important; } }
        @media (max-width: 480px) { .pullquote { font-size: 24px !important; } }
      `}</style>
    </section>
  );
}

window.PullQuote = PullQuote;