@layer sections{
  [ui-section=image-banners] .banners{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap:var(--spacing-32);
    gap:var(--spacing-32);
  }
  [ui-section=image-banners] .banners .image-item{
    display:flex;
    position:relative;
    align-items:flex-end;
    width:100%;
    height:var(--desktop-height);
    padding:var(--spacing-32);
    overflow:hidden;
    border-radius:var(--radius-card);
    background-color:oklch(from var(--bg-color) calc(l - 0.0225) calc(c + 0.0181) calc(h + 6.6));
  }
  [ui-section=image-banners] .banners .image-item [ui-block=image]{
    position:absolute;
    inset:0;
  }
  [ui-section=image-banners] .banners .image-item [ui-block=image] ui-image-fallback{
    color:oklch(from var(--bg-color) calc(l - 0.4) calc(c + 0.0181) calc(h + 6.6));
  }
  [ui-section=image-banners] .banners .image-item [ui-block=image] img{
    -o-object-fit:cover;
       object-fit:cover;
  }
  [ui-section=image-banners] .banners .image-item [ui-block=button]{
    z-index:1;
    min-width:min(200px, 100%);
  }
  [ui-section=image-banners][data-fullscreen]{
    padding-inline:var(--spacing-16);
  }
  @media (max-width: 769px){
    [ui-section=image-banners] .banners{
      grid-template-columns:1fr;
    }
    [ui-section=image-banners] .banners .image-item{
      height:var(--mobile-height);
      padding:var(--spacing-16);
    }
    [ui-section=image-banners] .banners .image-item [ui-block=button]{
      z-index:1;
      width:100%;
    }
  }
}