How to scale responsive image and text container while maintaining margins/padding?

Question

I need to be able to maintain the margins and padding for a web page where the text is placed over a given region of the image.

Does anyone have a potential solution or workaround for this?

  imageWrapper: {
    backgroundSize: "auto 100%",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center center",
    width: "100%",
    height: "100vh",
    position: "relative",
    zIndex: variables.zIndex10,
    display: "flex",
    alignItems: "center",
    justifyContent: 'center',
  },

  backgroundImage: {
    backgroundSize: "cover",
    backgroundImage: "url(" + aboutBackground + ")",
    [theme.breakpoints.down('sm')]: {
      backgroundImage: "url(" + aboutBackgroundMobile + ")",
    },

    "&::after": {
      content: '""',
      position: "absolute",
      display: "inline-block",
      height: "100%",
      width: "100%",
      backgroundColor: variables.secondaryOne,
      top: 0,
      mixBlendMode: "multiply",
    },
  },
  imageContainer: {
    width: "auto",
    height: "100vh",
    zIndex: variables.zIndex10,
    position: "relative",
    display: "block",
    '@media (max-width: 1500px)': {
      padding: "0px 20px",
    },
  },
  bookImage: {
    width: "100%",
    height: "100%",
    display: "block",
    objectFit: "contain",
    position: "relative",
  },
  pageWrapper: {
    height: "100%",
    width: "50%",
    display: "flex",
    flexDirection: "column",
    zIndex: variables.zIndex20,
    position: "absolute",
    right: 0,
    top: 0,
    padding: "13rem 5rem 13rem 2rem",
    backgroundColor: "rgba(239, 11, 212, 0.35)",
    justifyContent: "center",
  },
  pageContent: {
    height: "90%",
    width: "90%",
    margin: "0px auto",
    backgroundColor: "rgba(38, 11, 239, 0.28)",
    overflowY: "hidden",
  },
  pageLogo: {
    width: "30%",
    height: "auto",
    display: "inline-block",
    position: "relative",
    marginBottom: "2rem",
  },
  textContainer: {
    backgroundColor: "rgba(23, 239, 11, 0.35)",
    padding: "0px 2rem 10rem 1rem",
    overflowY: "scroll",
    height: "100%",
    maxHeight: "inherit",
  },
  textWrapper: {
    height: "fit-content",
    paddingTop: "1rem",
  },
  aboutText: {
    fontFamily: variables.fontArticulat,
    paddingBottom: 10,
  }

<DefaultPageWrapper>
      <div className={classNames(classes.imageWrapper, classes.backgroundImage)}>
        <div className={classNames(classes.imageContainer)}>
          <img src={aboutBook} className={classes.bookImage} alt={`diy`}/>
            <div className={classes.pageWrapper}>
              <div className={classes.pageContent}>
                <img src={diyLogo} className={classes.pageLogo} alt={`diy`}/>
                <div className={classes.textContainer}>
                  <div className={classes.textWrapper}>
                    <Typography variant="body1" className={classes.aboutText}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
                    </Typography>
                    <Typography variant="body1" className={classes.aboutText}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
                    </Typography>
                    <Typography variant="body1" className={classes.aboutText}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
                    </Typography>
                    <Typography variant="body1" className={classes.aboutText}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
                    </Typography>
                    <Typography variant="body1" className={classes.aboutText}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
                    </Typography>
                    <Typography variant="body1" className={classes.aboutText}>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
                    </Typography>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </DefaultPageWrapper>

• Tried using rem/em/percentages for margins/padding.
• Tried using an image map but I can't figure out how to insert text into the map area.