function Gallery() {
  return (
    <section id="makeup-team" style={{ padding: "140px 0", background: "var(--paper)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "end", gap: 40, marginBottom: 56 }}>
          <div>
            <div className="eyebrow">Makeup Team</div>
            <h2 className="display" style={{ fontSize: "clamp(48px, 5.5vw, 84px)", margin: "20px 0 0", color: "var(--coffee)", textWrap: "balance" }}>
              {t('galleryHeadline1')}
              <span className="italic" style={{ color: "var(--rose)" }}>{t('galleryHeadline2')}</span>
            </h2>
          </div>
          <div style={{ justifySelf: "end", maxWidth: 520 }}>
            <p className="body-lg" style={{ margin: 0 }}>
              {t('galleryDesc')}
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr 1fr", gap: 16, alignItems: "stretch" }}>
          <img
            src={assetBase + "assets/images/team3.jpg"}
            alt="Ana Paula maquillando a una novia en el estudio"
            loading="lazy"
            decoding="async"
            style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 0 }}
          />
          <img
            src={assetBase + "assets/images/team1.jpg"}
            alt="Equipo de maquillaje en sesión 1"
            loading="lazy"
            decoding="async"
            style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 0 }}
          />
          <img
            src={assetBase + "assets/images/team2.jpg"}
            alt="Equipo de maquillaje en sesión 2"
            loading="lazy"
            decoding="async"
            style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 0 }}
          />
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;