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" }}>
              Nuestro equipo,
              <span className="italic" style={{ color: "var(--rose)" }}> tu tranquilidad.</span>
            </h2>
          </div>
          <div style={{ justifySelf: "end", maxWidth: 520 }}>
            <p className="body-lg" style={{ margin: 0 }}>
              Contamos con un equipo de maquillistas profesionales, capacitadas por Ana Paula,
              para cuidar cada detalle de tu evento con la misma técnica, sensibilidad y compromiso.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr 1fr", gap: 16, alignItems: "stretch" }}>
          <div style={{ background: "var(--ivory)", border: "1px solid var(--marfil)", borderRadius: 4, display: "grid", placeItems: "center", padding: 24 }}>
            <img
              src="assets/logo/logo-team-2.png"
              alt="Logo del Makeup Team"
              style={{ width: "100%", maxWidth: 340, objectFit: "contain" }}
            />
          </div>
          <img
            src="assets/images/team1.jpg"
            alt="Equipo de maquillaje en sesión 1"
            style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 4 }}
          />
          <img
            src="assets/images/team2.jpg"
            alt="Equipo de maquillaje en sesión 2"
            style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 4 }}
          />
        </div>
      </div>
    </section>
  );
}

window.Gallery = Gallery;