Best approach for floating a Div with background image over 2 other Divs?

For a design like this:

What is the best approach for floating these 2 cards over 1) left side which is a background images and 2) regular div with form structure ?

I'm starting with Grid from the very top and the credit cards will also be Grid but can't seem to float the cards without using position: absolute

I'm running into tricky issues with width, height and responsive design and getting the data on the credit card to layout nicely (also using grid).

So my App.tsx looks like this:

import styled from "styled-components";
import { CSSReset } from "./util/globalStyles";
import backgroundImage from "./assets/images/bg-main-desktop.png";
import backgroundImageMobile from "./assets/images/bg-main-mobile.png";
import CardsController from "./Components/CardsController";

const AppContainer = styled.div`
  display: grid;
  grid-template-columns: 300px 1fr 2fr;
  grid-template-rows: minmax(100px, auto);
  width: 100%;
  height: 100vh;
  @media (max-width: 768px) {
    display: flex;
    flex-direction: column;
  }
`;

const LeftScreen = styled.div`
  grid-column: 1/2;
  background-image: url(${backgroundImage});
  padding: 0.5em;
  @media (max-width: 768px) {
    flex: 1;
    background-image: url(${backgroundImageMobile});
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
`;

const RightScreen = styled.div`
  grid-column: 2/4;
  padding: 0.5em;
  border: blue solid 1px;
  @media (max-width: 768px) {
    flex: 2;
    width: 100%;
  }
`;

function App() {
  return (
    <>
      <CSSReset />
      <AppContainer>
        <LeftScreen>left</LeftScreen>
        <RightScreen>right</RightScreen>
        <CardsController />
      </AppContainer>
    </>
  );
}

export default App;

and a card component looks like this:

import styled from "styled-components";
import cardFrontImage from "../assets/images/bg-card-front.png";
import { colors } from "../util/globalStyles";

type CircleProps = {
  large?: boolean;
};

const CardContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  background-image: url(${cardFrontImage});
  background-repeat: no-repeat;
  padding: 0.5em;
  position: absolute;
  top: 250px;
  left: 180px;
  z-index: 2;
  width: 100%;
  height: 50%;
  @media (max-width: 768px) {
    display: grid;
    width: 100%;
    height: 50%;
    top: 200px;
    left: 5px;
    background-size: 75% 50%;
  }
`;

const CircleContainer = styled.div`
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  justify-content: "space-between";
  align-items: center;
  width: 50%;
  max-width: 300px;
  padding: 0.5em;
  border: 1px solid orange;
  @media (max-width: 768px) {
    height: 30%;
  }
`;

const Circle = styled.div<CircleProps>`
  background: ${(props) => props.large && `${colors.white}`};
  border-radius: 50%;
  margin-left: 20px;
  border: ${colors.white} solid 1px;
  width: ${(props) => (props.large ? "40px" : "25px")};
  height: ${(props) => (props.large ? "40px" : "25px")};
`;

const CardNumber = styled.div`
  grid-column: 1/3;
  grid-row: 2;
  padding: 20px;
  margin-top: 50px;
  color: ${colors.white};
  letter-spacing: 0.4em;
  border: purple solid 1px;
`;

const CardName = styled.p`
  grid-column: 1;
  grid-row: 3;
  margin-top: 10px;
  margin-left: 20px;
  color: ${colors.white};
  font-size: 0.8rem;
`;

const CardDate = styled.p`
  color: ${colors.white};
  font-size: 0.8rem;
`;

const CardFront = () => {
  console.log("cardfront");
  return (
    <CardContainer>
      <CircleContainer>
        <Circle large />
        <Circle />
      </CircleContainer>
      <CardNumber>2343 3433 3432 3432</CardNumber>
      <CardName>Demian Sims</CardName>
      <CardDate>01/01</CardDate>
    </CardContainer>
  );
};

export default CardFront;

Is this the right approach and I just have to really tweak the margins, padding, width and height to get all the rendered data to fit in nicely and also apply that to mobile?

The mobile design is stacked up like so: