@lanaco/lnc-react-ui/dist/BannerSectionGrid.cjs

React component library

"use strict";const t=require("react/jsx-runtime"),j=require("react"),w=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),f=require("./consts-CtNoHdBj.cjs"),k=require("./useDetectMobile-D6d5LpdL.cjs"),s=require("./index-Dit169OA.cjs"),q=w.newStyled.div`
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;

  & .text-item {
    max-height: ${e=>e.height};
    min-height: ${e=>e.height};
    max-width: 27rem;
    margin: auto;
  }

  & img {
    object-fit: cover;
    width: 100%;
    max-height: ${e=>e.height};
    min-height: ${e=>e.height};
  }

  & .img-1 {
    border-radius: 0.75rem 0.75rem 0.75rem 0;
  }

  & .img-2 {
    border-radius: 0.75rem 0rem 0.75rem 0.75rem;
  }

  @media (max-width: ${f.MOBILE_SIZE_PX+"px"}) {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;

    & .img-item {
      width: 100%;
      min-height: 11.25rem;
      max-height: 11.25rem;
    }

    & .img1,
    .img2 {
      border-radius: 0.75rem;
    }

    & .text-item {
      min-height: unset;
      max-height: unset;
    }
  }
`,T=j.forwardRef((e,B)=>{const{image1Url:n,image2Url:i,title1:o,title2:g,text1:a,text2:c,subtitle1:u,subtitle2:h,buttonText1:l,buttonText2:x,buttonLink1:d,buttonLink2:b,rowHeight:p="12.65625rem",onButtonAction:r=()=>{}}=e,m=k.useDetectMobile();return t.jsxs(q,{height:p,children:[t.jsx(s.TextBlockV1,{className:"text-item",title:o,subtitle:u,description:a,buttonText:l,buttonLink:d,onButtonAction:r}),t.jsx("img",{className:"img-item img-1",src:n}),m!==!0&&t.jsx("img",{className:"img-item img-2",src:i}),t.jsx(s.TextBlockV1,{className:"text-item",title:g,subtitle:h,description:c,buttonText:x,buttonLink:b,onButtonAction:r}),m===!0&&t.jsx("img",{className:"img-item img-2",src:i})]})});module.exports=T;