How to make React + MUI component mobile responsive?

I have a React component created using Material-UI (MUI) that I’m trying to make mobile responsive. Currently, it looks like this:

Now, it looks like this

But I want it to look like this

It should look like this

Here’s the relevant code for the component:

import React from 'react';
import {
  Box, Typography, Paper, Rating, Avatar,
} from '@mui/material';


type CarInfoProps = {
  title: string;
  imageUrl: string;
  rating: number;
  comments: string[];
};

const CarInfo: React.FC<CarInfoProps> = ({
  title, imageUrl, rating, comments,
}) => {
  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="center"
      justifyContent="center"
      height="100vh"
    >
      <Paper elevation={3}
        style={{
          padding: '16px', display: 'flex', flexDirection: 'column', alignItems: 'center', height: '980px', width: '955px',
        }}>
        <Typography variant="h5" gutterBottom style={{ textAlign: 'center' }}>
          {title}
        </Typography>
        <Avatar alt={title} src={imageUrl} style={{ marginTop: '16px' }} />
        <Box style={{ marginTop: '16px' }}>
          <Typography variant="body1">Car Info:</Typography>
          {/* Add additional car information here */}
        </Box>
        <Box style={{ marginTop: '16px' }}>
          <Typography variant="body1">Rating:</Typography>
          <Rating value={rating} readOnly />
        </Box>
        <Box style={{ marginTop: '16px' }}>
        </Box>
      </Paper>
    </Box>
  );
};

export default CarInfo;

I’ve tried a lot of different things, but I’m facing challenges achieving the desired mobile responsiveness. Can someone provide guidance on how to structure the styles or any MUI-specific considerations to achieve the desired mobile layout?

I asked the same question yesterday, but I don’t find solution and it is very urgent task!

I really hope that you will help me!