@layer sections{
  [ui-section=image-with-text]{
    padding:var(--top-spacing) 8% var(--bottom-spacing) !important;
  }
  [ui-section=image-with-text] .wrapper-area{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    height:var(--height);
    overflow:hidden;
    border-radius:var(--radius-media);
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=media]{
    height:inherit;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=media] > img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=media][data-image-placement=first]{
    order:-1;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=media][data-image-placement=second]{
    order:1;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content]{
    display:flex;
    flex-direction:column;
    padding:var(--spacing-48);
    gap:var(--spacing-32);
    background-color:var(--color-surface-container-low);
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content][data-text-alignment=start]{
    align-items:flex-start;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content][data-text-alignment=center]{
    align-items:center;
    text-align:center;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content][data-text-alignment=end]{
    align-items:flex-end;
    text-align:end;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content][data-vertical-alignment=start]{
    justify-content:flex-start;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content][data-vertical-alignment=center]{
    justify-content:center;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content][data-vertical-alignment=end]{
    justify-content:flex-end;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content] .description{
    color:var(--color-on-surface-variant);
    font:var(--font-body-lg);
    text-wrap:balance;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content] .cta{
    width:-moz-fit-content;
    width:fit-content;
  }
  [ui-section=image-with-text] .wrapper-area [ui-block=content] .cta[ui-slot=button]{
    min-width:180px;
  }
  [ui-section=image-with-text][data-teaser=true]{
    padding:0 8% 24px !important;
  }
  [ui-section=image-with-text][data-teaser=true] .wrapper-area{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1.75fr) minmax(340px, 1fr);
    height:clamp(500px,58vw,650px);
    min-height:500px;
    max-height:650px;
    border-radius:28px;
    isolation:isolate;
    box-shadow:0 24px 70px -35px rgba(11,61,30,.5);
  }
  [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=media]{
    position:relative;
    height:100%;
    order:-1;
  }
  [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=media]::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(6,32,18,.02),rgba(6,32,18,.12));
    pointer-events:none;
  }
  [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=media] > img{
    width:100%;
    height:100%;
    object-position:center center;
  }
  [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=content]{
    position:relative;
    z-index:1;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:clamp(32px,4vw,64px);
    color:#123f28;
    background:linear-gradient(145deg,#f2fbf3 0%,#e5f5e8 100%);
    gap:18px;
    direction:rtl;
  }
  [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=content] .heading{
    max-width:650px;
    font-size:clamp(30px,3vw,46px);
    line-height:1.25;
    font-weight:700;
    text-shadow:none;
    text-wrap:balance;
  }
  [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=content] .description{
    max-width:520px;
    color:#42634f;
    font-size:clamp(15px,1.25vw,19px);
    line-height:1.8;
  }
  @media (max-width: 1028px){
    [ui-section=image-with-text] .wrapper-area{
      grid-template-columns:1fr;
      height:auto;
    }
    [ui-section=image-with-text] .wrapper-area [ui-block=media]{
      height:calc(70vh / 2);
      height:calc(var(--height, 70vh) / 2);
    }
    [ui-section=image-with-text] .wrapper-area [ui-block=content]{
      padding-inline:var(--spacing-24);
    }
    [ui-section=image-with-text][data-teaser=true]{
      padding:0 14px 18px !important;
    }
    [ui-section=image-with-text][data-teaser=true] .wrapper-area{
      display:block;
      height:76vh;
      min-height:590px;
      max-height:760px;
      border-radius:22px;
    }
    [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=media]{
      position:absolute;
      inset:0;
      height:100%;
    }
    [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=media]::after{
      background:linear-gradient(180deg,rgba(6,32,18,.02) 35%,rgba(6,32,18,.82) 100%);
    }
    [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=media] > img{
      object-position:43% center;
    }
    [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=content]{
      position:absolute;
      inset:auto 0 0;
      min-height:43%;
      justify-content:flex-end;
      padding:38px 24px 42px;
      gap:12px;
      color:#fff;
      background:transparent;
    }
    [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=content] .heading{
      font-size:clamp(30px,9vw,42px);
      line-height:1.28;
      text-shadow:0 3px 22px rgba(0,0,0,.25);
    }
    [ui-section=image-with-text][data-teaser=true] .wrapper-area [ui-block=content] .description{
      color:rgba(255,255,255,.92);
      font-size:16px;
      line-height:1.7;
    }
  }
}