How can I make one image spill out and the other clipped into a div?

This Image contains a div with two images, one for the background (the circles) and one for the content (the two phones (one image)). Can you suggest a way to make the phones spill out of the div while keeping the circles clipped?

Here's the React component:

export default function Infr() {
  return (
    <div className="infr">
      <img src="/images/bg-pattern-circles.svg" className="infr__bg" />

      <img src="/images/illustration-phones.svg" className="phones" />
      <div className="infr__items">
        <div className="items__details">
          <h3>State of the Art Infrastructure</h3>
          <p>
            With reliability and speed in mind, worldwide data centers provide
            the backbone for ultra-fast connectivity. This ensures your site
            will load instantly, no matter where your readers are, keeping your
            site competitive.
          </p>
        </div>
      </div>
    </div>
  );
}

And here's the CSS:

.infr {
  height: 20rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to left, var(--black), var(--deep-blue));
  position: relative;
  border-radius: 0 100px 0 100px;
  z-index: -2;
  color: white;
  overflow: hidden;
}

.infr__bg {
  position: absolute;
  transform: translate(-25rem, -10rem);
  z-index: -1;
}

.infr__items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}

.phones {
  /* position: absolute; */
  overflow: visible;
}

I tried making the phones' position: absolute as per ChatGPT's suggestion but it didn't work.

Thanks in advance for help.

You can try wrapping the phone image in a separate div placed before .infr . This keeps the phone outside the clipped container. Also set .phones-wrapper to position:relative and apple a negative bottom margin to make the phone overlap .infr. Keep .infr with overflow:hidden to clip background circles. Also set the phone image to max-width:100% and adjust its position visually. This way, the background stays clipped inside the .infr, while the phone image spills out visually above it.