How to implement custom layout to the css and make it responsiveness? - html

Question

I'm trying to make the pages responsive, Here is the code I have tried.
Code:
<Box
sx={{
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
display: 'flex',
flexDirection: 'column',
alignItems: "center",
overflow: "hidden",
overflowY: "scroll",
}}
>
<Grid
container
direction="column"
alignItems="center"
>
<Grid item sx={{mt: 8, mb:7}}>
<CardMedia
component="img"
image="logo.png"
alt="logo"
sx={{
width: { xs: '80%', sm: '80%', md: '100%', lg: '100%', xl: '100%' }
}}
style={{ margin: '0 auto' }}
/>
</Grid>
</Grid>
<Grid container justifyContent="center">
<Grid item xs={11} sm={8} md={6} lg={5} xl={3.5}>
<Card
sx={{
backgroundColor: 'white',
borderRadius: '6px'
}}
>
<Box
sx={{mt:4, mb:5, mx:4}}
>
<Box>
<Stack
direction={"row"}
spacing={3}
>
<CardMedia>...</CardMedia>
<Box
sx={{wordWrap: "break-word", overflow: "hidden"}}
>
<Typography>
......
</Typography>
<Typography>
......
</Typography>
<Chip>...</Chip>
</Box>
</Stack>
</Box>
</Box>
</Card>
</Grid>
</Grid>
<Stack
direction="row"
alignItems="center"
justifyContent="center"
spacing={{xs: 3, sm: 4}}
sx={{ mt: 3, mb: 3 }}
>
<Button
variant="contained"
>
Button1
</Button>
<Button
variant="contained"
>
Button2
</Button>
</Stack>
</Box>
The question is how can I make my code conform to the figma specification? and it still be responsive. I'm so confused about how to add top: 188px, left: 653px those parameter to the mui Box or should I use percentage?
This is the figma layout.