import { jsx as i, jsxs as e } from "react/jsx-runtime";
import a from "../../modules/Grid/grid.module.css";
import { Typography as l } from "../../components/Typography/Typography.es.js";
const t = ({ image: c, title: r, description: s }) => /* @__PURE__ */ e("div", { className: a.mobileContent, children: [
  /* @__PURE__ */ i("div", { className: a.leftBorder }),
  /* @__PURE__ */ e("div", { className: a.mobileColumn, children: [
    /* @__PURE__ */ i("img", { className: a.image, src: c }),
    /* @__PURE__ */ e("div", { className: a.mobileText, children: [
      /* @__PURE__ */ i(l, { as: "p", defaultVariant: "headingSm", mobileVariant: "headingSm", children: r }),
      /* @__PURE__ */ i(l, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyMd", children: s })
    ] })
  ] }),
  /* @__PURE__ */ i("div", { className: a.rightBorder })
] }), N = ({ headline: c, topRow: r, middleRow: s, bottomRow: d, backgroundGradient: n }) => /* @__PURE__ */ i("section", { className: a.root, "data-background": n, children: /* @__PURE__ */ e("div", { className: a.container, children: [
  /* @__PURE__ */ i(l, { className: a.headline, as: "h2", defaultVariant: "displayXs", mobileVariant: "headingXl", children: c }),
  /* @__PURE__ */ e("div", { className: a.desktopGrid, children: [
    /* @__PURE__ */ e("div", { className: a.leftColumn, children: [
      /* @__PURE__ */ e("div", { className: a.halfVector, children: [
        /* @__PURE__ */ i("div", { className: a.horizontalVector }),
        /* @__PURE__ */ i("div", { className: a.horizontalVector })
      ] }),
      /* @__PURE__ */ e("div", { className: a.row, children: [
        /* @__PURE__ */ i("div", { className: a.horizontalVector }),
        /* @__PURE__ */ e("div", { className: a.leftText, children: [
          /* @__PURE__ */ i(l, { as: "p", defaultVariant: "headingSm", mobileVariant: "headingSm", children: s.title }),
          /* @__PURE__ */ i(l, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyMd", children: s.description })
        ] }),
        /* @__PURE__ */ i("div", { className: a.horizontalVector })
      ] }),
      /* @__PURE__ */ e("div", { className: a.halfVector, children: [
        /* @__PURE__ */ i("div", { className: a.horizontalVector }),
        /* @__PURE__ */ i("div", { className: a.horizontalVector })
      ] })
    ] }),
    /* @__PURE__ */ e("div", { className: a.midColumn, children: [
      /* @__PURE__ */ i("img", { className: a.image, src: r.image }),
      /* @__PURE__ */ i("img", { className: a.image, src: s.image }),
      /* @__PURE__ */ i("img", { className: a.image, src: d.image })
    ] }),
    /* @__PURE__ */ e("div", { className: a.rightColumn, children: [
      /* @__PURE__ */ e("div", { className: a.halfVector, children: [
        /* @__PURE__ */ i("div", { className: a.horizontalVector }),
        /* @__PURE__ */ i("div", { className: a.horizontalVector })
      ] }),
      /* @__PURE__ */ e("div", { className: a.row, children: [
        /* @__PURE__ */ i("div", { className: a.horizontalVector }),
        /* @__PURE__ */ e("div", { className: a.rightTopText, children: [
          /* @__PURE__ */ i(l, { as: "p", defaultVariant: "headingSm", mobileVariant: "headingSm", children: r.title }),
          /* @__PURE__ */ i(l, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyMd", children: r.description })
        ] }),
        /* @__PURE__ */ i("div", { className: a.horizontalVector })
      ] }),
      /* @__PURE__ */ i("div", { className: a.rightVector }),
      /* @__PURE__ */ e("div", { className: a.row, children: [
        /* @__PURE__ */ i("div", { className: a.horizontalVector }),
        /* @__PURE__ */ e("div", { className: a.rightBotText, children: [
          /* @__PURE__ */ i(l, { as: "p", defaultVariant: "headingSm", mobileVariant: "headingSm", children: d.title }),
          /* @__PURE__ */ i(l, { as: "p", defaultVariant: "bodyMd", mobileVariant: "bodyMd", children: d.description })
        ] }),
        /* @__PURE__ */ i("div", { className: a.horizontalVector })
      ] }),
      /* @__PURE__ */ e("div", { className: a.halfVector, children: [
        /* @__PURE__ */ i("div", { className: a.horizontalVector }),
        /* @__PURE__ */ i("div", { className: a.horizontalVector })
      ] })
    ] })
  ] }),
  /* @__PURE__ */ e("div", { className: a.mobileGrid, children: [
    /* @__PURE__ */ i(t, { image: r.image, title: r.title, description: r.description }),
    /* @__PURE__ */ i(
      t,
      {
        image: s.image,
        title: s.title,
        description: s.description
      }
    ),
    /* @__PURE__ */ i(
      t,
      {
        image: d.image,
        title: d.title,
        description: d.description
      }
    )
  ] })
] }) });
export {
  N as Grid
};
