Styled Card - Copy this React, Mui Component to your project

import-ArrowBackIcon-from-'@mui/icons-material/ArrowBack';-import-DeleteIcon-from-'@mui/icons-material/Delete';-import-EditIcon-from-'@mui/icons-material/Edit';-import-HelpOutlineIcon-from-'@mui/icons-material/HelpOutline';-import-ReceiptLongIcon-from-'@mui/icons-material/ReceiptLong';-import-{-Box,-Button,-Divider,-IconButton,-InputAdornment,-TextField,-Tooltip,-Typography-}-from-'@mui/material';-import-React-from-'react';-export-const-Cart-=-()-=>-(-<Box-display="flex"-flexDirection="column"-alignItems="center"-width="1440px"-height="997px"-bgcolor="white"->-<img-alt="Group"-src="https://c.animaapp.com/XSfDVvfu/img/group-41.png"-style={{-height:-'69px'-}}-/>-<Box-display="flex"-justifyContent="space-between"-width="100%"-flexGrow={1}->-<Box-display="flex"-flexDirection="column"-pl={5}-pt={2}-flexGrow={1}>-<Box-display="flex"-alignItems="center"-mb={2}>-<ArrowBackIcon-color="primary"-/>-<Typography-variant="body1"-color="primary"-ml={1}>-BACK-</Typography>-</Box>-<Box-display="flex"-flexDirection="column"-alignItems="center"-mt={-1}->-<img-alt="Cart-gift-cards"-src="https://c.animaapp.com/XSfDVvfu/img/cart--6-gift-cards-.png"-style={{-width:-'375px'-}}-/>-<Box-display="flex"-flexDirection="column"-width="375px"-mt={2}>-<Typography-variant="h6"-color="textPrimary">-Digital-(4-gift-cards)-</Typography>-<Box-display="flex"-flexDirection="column"-mt={2}>-<Box-display="flex"-mb={2}>-<img-alt="Elevation"-src="https://c.animaapp.com/XSfDVvfu/img/elevation-4@2x.png"-style={{-width:-'96px',-height:-'64px'-}}-/>-<Box-ml={2}-flexGrow={1}>-<Typography-variant="body2"-color="textPrimary">-<strong>To:</strong>-{'-'}-You-<br-/>-john@gmail.com-<br-/>-+1-(385)-234-5244-</Typography>-<Box-display="flex"-justifyContent="space-between"-mt={1}>-<Typography-variant="body2"-color="textSecondary">-$10-gift-card-x-2-</Typography>-<Typography-variant="h6"-color="textPrimary">-$20-</Typography>-</Box>-</Box>-</Box>-<Box-display="flex"-alignItems="center"-mb={2}>-<IconButton-size="small">-<EditIcon-color="action"-/>-</IconButton>-<Typography-variant="body2"-color="textSecondary">-Edit-</Typography>-<Divider-orientation="vertical"-flexItem-sx={{-mx:-1-}}-/>-<IconButton-size="small">-<DeleteIcon-color="action"-/>-</IconButton>-<Typography-variant="body2"-color="textSecondary">-Remove-</Typography>-</Box>-<Divider-/>-<Box-display="flex"-mt={2}>-<img-alt="Elevation"-src="https://c.animaapp.com/XSfDVvfu/img/elevation-4-2@2x.png"-style={{-width:-'96px',-height:-'64px'-}}-/>-<Box-ml={2}-flexGrow={1}>-<Box-display="flex"-alignItems="center">-<Typography-variant="body2"-color="textPrimary">-You’ll-share-a-link-</Typography>-<Tooltip-title="After-purchase-you’ll-receive-a-gift-card-link-to-share-with-the-recipient.">-<HelpOutlineIcon-color="action"-/>-</Tooltip>-</Box>-<Box-display="flex"-justifyContent="space-between"-mt={1}>-<Typography-variant="body2"-color="textSecondary">-$10-gift-card-x-2-</Typography>-<Typography-variant="h6"-color="textPrimary">-$20-</Typography>-</Box>-</Box>-</Box>-<Box-display="flex"-alignItems="center"-mt={2}>-<IconButton-size="small">-<EditIcon-color="action"-/>-</IconButton>-<Typography-variant="body2"-color="textSecondary">-Edit-</Typography>-<Divider-orientation="vertical"-flexItem-sx={{-mx:-1-}}-/>-<IconButton-size="small">-<DeleteIcon-color="action"-/>-</IconButton>-<Typography-variant="body2"-color="textSecondary">-Remove-</Typography>-</Box>-<Divider-/>-<Box-display="flex"-alignItems="center"-mt={2}-p={1}-bgcolor="white"-border={1}-borderColor="#f3f3f3"-borderRadius={1}-boxShadow={1}->-<Typography-variant="body2"-color="textPrimary">-Removed-{'-'}-<strong>$100-gift-card-x-2</strong>-</Typography>-<Button-color="primary">UNDO</Button>-</Box>-<Divider-/>-<Typography-variant="h6"-color="textPrimary"-mt={2}>-Physical-(2-gift-cards)-</Typography>-<Box-display="flex"-mt={2}>-<img-alt="Elevation"-src="https://c.animaapp.com/XSfDVvfu/img/elevation-4-2@2x.png"-style={{-width:-'96px',-height:-'64px'-}}-/>-<Box-ml={2}-flexGrow={1}>-<Typography-variant="body2"-color="textPrimary">-<strong>To:</strong>-{'-'}-Sandra-<br-/>-13th-Street,-47-W-13th-St,-New-York,-NY-10011,-USA-</Typography>-<Box-display="flex"-justifyContent="space-between"-mt={1}>-<Typography-variant="body2"-color="textSecondary">-$50-gift-card-x-2-</Typography>-<Typography-variant="h6"-color="textPrimary">-$100-</Typography>-</Box>-</Box>-</Box>-<Box-display="flex"-flexDirection="column"-mt={2}-p={2}-bgcolor="#f3f3f3"-borderRadius={1}->-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-Shipping-&-extras-</Typography>-<Box-display="flex"-justifyContent="space-between"-mt={1}>-<Typography-variant="body2"-color="textPrimary">-FedEx-2-Day-shipping-</Typography>-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-$19.00-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mt={1}>-<Typography-variant="body2"-color="textPrimary">-Gift-box-($1.99)-×-2-</Typography>-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-$3.98-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mt={1}>-<Typography-variant="body2"-color="textPrimary">-Activation-fee-($3.99)-×-2-</Typography>-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-$7.98-</Typography>-</Box>-</Box>-<Box-display="flex"-alignItems="center"-mt={2}>-<IconButton-size="small">-<EditIcon-color="action"-/>-</IconButton>-<Typography-variant="body2"-color="textSecondary">-Edit-</Typography>-<Divider-orientation="vertical"-flexItem-sx={{-mx:-1-}}-/>-<IconButton-size="small">-<DeleteIcon-color="action"-/>-</IconButton>-<Typography-variant="body2"-color="textSecondary">-Remove-</Typography>-</Box>-</Box>-</Box>-</Box>-</Box>-<Box-display="flex"-flexDirection="column"-pl={8}-pr={5}-py={2}-bgcolor="#fefefe"-boxShadow={1}->-<Box-width="388px"-height="90px"-mb={2}>-<img-alt="Gift-your-colleagues"-src="https://c.animaapp.com/XSfDVvfu/img/rectangle-30416@2x.png"-style={{-width:-'100%',-height:-'100%'-}}-/>-</Box>-<Box-display="flex"-flexDirection="column"-width="100%"-bgcolor="#fefefe"-borderRadius={2}-p={2}->-<Box-display="flex"-alignItems="center"-mb={2}>-<img-alt="Offers-and-coupons"-src="https://c.animaapp.com/XSfDVvfu/img/group-4060@2x.png"-style={{-width:-'20px',-height:-'20px'-}}-/>-<Typography-variant="h6"-color="textPrimary"-ml={1}>-Offers-and-coupons-</Typography>-</Box>-<Box-display="flex"-flexDirection="column"-bgcolor="white"-border={1}-borderColor="#00754a"-borderRadius={1}-p={2}->-<Typography-variant="body2"-color="primary">-Offer-auto-applied-</Typography>-<Typography-variant="body1"-color="textPrimary">-Free-$10-gift-card-×-2-</Typography>-<Typography-variant="body2"-color="textSecondary"-underline="hover"->-Terms-and-conditions-</Typography>-<Box-display="flex"-mt={2}>-<img-alt="Elevation"-src="https://c.animaapp.com/XSfDVvfu/img/elevation-4-3@2x.png"-style={{-width:-'56px',-height:-'56px'-}}-/>-<Box-ml={2}-flexGrow={1}>-<Typography-variant="body2"-color="textPrimary">-<strong>To:</strong>-{'-'}-You-<br-/>-john@gmail.com-</Typography>-<Box-display="flex"-alignItems="center"-mt={1}>-<IconButton-size="small">-<EditIcon-color="primary"-/>-</IconButton>-<Typography-variant="body2"-color="primary">-Change-recipient-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mt={1}>-<Typography-variant="body2"-color="textSecondary">-$10-gift-card-×-2-</Typography>-<Typography-variant="h6"-color="textPrimary">-$20-{'-'}-<Typography-variant="body2"-color="textSecondary">-(Free)-</Typography>-</Typography>-</Box>-</Box>-</Box>-</Box>-<Box-display="flex"-alignItems="center"-mt={2}>-<TextField-variant="outlined"-placeholder="Enter-promo-code"-fullWidth-InputProps={{-endAdornment:-(-<InputAdornment-position="end">-<Button-variant="contained"-color="primary">-Apply-</Button>-</InputAdornment>-)-}}-/>-</Box>-</Box>-<Divider-sx={{-my:-2-}}-/>-<Box-display="flex"-flexDirection="column"-width="100%">-<Box-display="flex"-alignItems="center"-mb={2}>-<ReceiptLongIcon-color="action"-/>-<Typography-variant="h6"-color="textPrimary"-ml={1}>-Your-order-(6-gift-cards)-</Typography>-<Typography-variant="body2"-color="textSecondary"-ml="auto">-(in-USD)-</Typography>-</Box>-<Box-display="flex"-flexDirection="column">-<Box-display="flex"-justifyContent="space-between"-mb={1}>-<Typography-variant="body2"-color="textPrimary">-Gift-card-subtotal-</Typography>-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-$240.00-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mb={1}>-<Typography-variant="body2"-color="textPrimary">-FedEx-2-Day-Delivery-×-2-</Typography>-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-$38.00-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mb={1}>-<Typography-variant="body2"-color="primary">-UPS-7-Day-Delivery-×-1-</Typography>-<Typography-variant="body2"-color="primary"-fontWeight="bold">-Free-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mb={1}>-<Typography-variant="body2"-color="textPrimary">-Activation-fee-×-2-</Typography>-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-$10.00-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mb={1}>-<Typography-variant="body2"-color="textPrimary">-Gift-box-×-2-</Typography>-<Typography-variant="body2"-color="textPrimary"-fontWeight="bold"->-$10.00-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mb={1}>-<Typography-variant="body2"-color="primary">-$10-Bonus-card-×-2-</Typography>-<Typography-variant="body2"-color="primary"-fontWeight="bold">-Free-</Typography>-</Box>-<Box-display="flex"-justifyContent="space-between"-mt={2}>-<Typography-variant="h6"-color="textPrimary">-Total-</Typography>-<Typography-variant="h6"-color="textPrimary"-fontWeight="bold">-$298.00-</Typography>-</Box>-</Box>-</Box>-<Box-display="flex"-flexDirection="column"-width="100%"-mt={2}>-<Box-display="flex"-alignItems="center"-bgcolor="#e6f1ed"-p={2}-borderRadius={1}-mb={2}->-<Typography-variant="body2"-color="textPrimary"-flexGrow={1}>-Add-$10-to-Sandra's-gift-card-to-get-free-shipping-</Typography>-<Button-color="primary">Add-$10</Button>-</Box>-<Button-variant="contained"-color="primary"-fullWidth-sx={{-mb:-2-}}->-Proceed-to-checkout-•-$298-</Button>-<Button-variant="outlined"-color="primary"-fullWidth>-Continue-shopping-</Button>-</Box>-</Box>-</Box>-</Box>-);-this-is-the-design-of-my-cart-page-,-i-want-to-make-it-responsive-soo-use-grid