function Gallery() {
  const photos = [
    { src: IMG.portrait, alt: "Charlie Provenza portrait" },
    { src: IMG.performance1, alt: "Performance" },
    { src: IMG.band, alt: "Mandolin Ranch band photo" },
    { src: IMG.aboutHero, alt: "Charlie with mandolin" },
    { src: IMG.aboutSide, alt: "Charlie performing" },
    { src: IMG.othello, alt: "Performance" },
    { src: IMG.live1, alt: "Live show" },
    { src: IMG.live2, alt: "Live show" },
    { src: IMG.live3, alt: "Live show" },
    { src: IMG.live4, alt: "Live performance" },
  ];

  return (
    <section>
      <div className="wrap">
        <div className="sec-head" style={{ marginTop: 40 }}>
          <div>
            <div className="mono kicker">Gallery</div>
            <h1 style={{ fontSize: "clamp(40px, 6vw, 80px)" }}>Thirty-five years<br /><em>in pictures.</em></h1>
          </div>
          <p>
            Weddings, festivals, rehearsals, and quiet cocktail hours.
            A visual field log of the last few decades on stage in Colorado.
          </p>
        </div>

        <div className="gallery-grid">
          {photos.map((p, i) => (
            <div key={i} className="cell">
              <img src={p.src} alt={p.alt} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;