我需要能夠維護網頁的空白和填充，其中文本放置在圖像的給定區域。

有人對此有潛在的解決方案或變通辦法嗎？

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>

嘗試對邊距/填充使用rem/em/percentages。 嘗試使用圖像映射，但我不知道如何插入文本 進入地圖區域。