function Experience() {
  return (
    <section id="masterclasses" style={{ padding: "140px 0", background: "var(--coffee)", color: "var(--ivory)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 70, alignItems: "center" }}>
          <div>
            <h2 className="display masterclasses__headline" style={{ fontSize: "clamp(72px, 14vw, 168px)", margin: 0, lineHeight: 0.9, color: "var(--ivory)" }}>
              Masterclass
            </h2>
            <p className="masterclasses__soon" style={{
              margin: "14px 0 0",
              fontFamily: "var(--font-sans)",
              fontSize: 13,
              fontWeight: 400,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              color: "var(--marfil)",
            }}>
              Coming soon
            </p>
            <p className="masterclasses__tagline" style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", color: "var(--bridal)", marginTop: 18, lineHeight: 1.35 }}>
              {t('expTagline')}
            </p>
          </div>
          <div className="body-lg" style={{ color: "var(--bridal)", maxWidth: 480, fontSize: 17 }}>
            <p style={{ marginTop: 0 }}>
              {t('expBody1')}
            </p>
            <p style={{ marginBottom: 0 }}>
              {t('expBody2')}
            </p>
            <a href="https://wa.me/523320126620" target="_blank" rel="noreferrer" className="btn" style={{ marginTop: 20, borderColor: "var(--ivory)", color: "var(--ivory)" }}>
              {t('expUpdates')}
            </a>
            <a
              href="https://www.instagram.com/anapaulacelismakeup/"
              target="_blank"
              rel="noreferrer"
              style={{
                display: "inline-block",
                marginTop: 16,
                color: "var(--ivory)",
                fontSize: 14,
                fontFamily: "var(--font-sans)",
                textDecoration: "none",
                borderBottom: "1px solid rgba(234,232,226,0.35)",
                paddingBottom: 2,
              }}
            >
              {t('expInstagram')}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Experience = Experience;