import { jsxs as l, jsx as i } from "react/jsx-runtime";
import e from "../../modules/ThreeCardsWithHero/threeCardsWithHero.module.css";
import { Typography as t } from "../../components/Typography/Typography.es.js";
import { TransparentCard as c } from "./components/TransparentCard/TransparentCard.es.js";
const g = ({ label: r, title: m, cards: n, desktopImage: s, mobileImage: o }) => /* @__PURE__ */ l("section", { className: e.bgWrapper, children: [
  /* @__PURE__ */ i("div", { className: e.root, children: /* @__PURE__ */ i("div", { className: e.topContainer, children: /* @__PURE__ */ i(
    "div",
    {
      className: e.imageContainer,
      style: {
        "--desktop-image": `url(${s})`,
        "--mobile-image": `url(${o || s})`
      },
      children: /* @__PURE__ */ l("div", { className: e.imageTextContainer, children: [
        r && /* @__PURE__ */ i(t, { className: e.imageLabel, emphasis: !0, defaultVariant: "labelMd", children: r }),
        /* @__PURE__ */ i("div", { className: e.imageTitle, children: /* @__PURE__ */ i(
          t,
          {
            className: e.imageTitle,
            as: "div",
            defaultVariant: "displayXl",
            mobileVariant: "displayXs",
            children: m
          }
        ) })
      ] })
    }
  ) }) }),
  /* @__PURE__ */ i("div", { className: e.bottomContainer, children: /* @__PURE__ */ i("div", { className: e.root, children: /* @__PURE__ */ i("div", { className: e.cardsContainer, children: n.slice(0, 3).map((a, d) => /* @__PURE__ */ i(
    c,
    {
      title: a.title,
      description: a.description,
      number: d + 1
    },
    a.title
  )) }) }) })
] });
export {
  g as ThreeCardsWithHero
};
