Hover Effect Card - Copy this React, Mui Component to your project

I-wants-to-optimize-these-cards-with-good-space-having-hovering-effect-on-them,-refere-code-below-:-import-*-as-React-from-'react';-import-Card-from-'@mui/material/Card';-import-CardActions-from-'@mui/material/CardActions';-import-CardContent-from-'@mui/material/CardContent';-import-CardMedia-from-'@mui/material/CardMedia';-import-DonateButton-from-'./DonateButton';-import-Typography-from-'@mui/material/Typography';-import-Image-from-'next/image';-import-{-Grid-}-from-'@mui/material';-export-default-function-MediaCard({-imgSrc,-CardHeading,-Amount,-CardDescription-})-{-return-(-<div-style={{padding-:-"30px",-minWidth-:-"380px"}}>-<Grid-container-spacing={5}-justify="center">-{/*-<Grid-item-xs={12}-lg={12}>-*/}-<Card-sx={{-Width:-345,-height:-'100%',-minHeight:-'550px',minWidth-:-'380px',-flexWrap:-"wrap",-textAlign:-"center",-fontFamily:-"Josefin-Sans",-border:-'2px-solid-#F85F36',-padding-:-"20px"-}}>-<CardMedia-component='img'-sx={{-objectFit:-'cover',-height:-'190px',-width:-'100%',-}}-image={imgSrc}-title="Hostels-Image"-/>-<CardContent>-<Typography-gutterBottom-variant="h5"-component="div"-sx={{-fontWeight:-'bold',-color:-"black"-}}->-{CardHeading}-</Typography>-<Typography-gutterBottom-variant="h6"-component="div"-sx={{-color:-"#F85F36"-}}>-{Amount}-</Typography>-<Typography-variant="body2"-color="text.secondary"-sx={{-color:-"hsla(0,-0%,-0%,-0.5)"-}}>-{CardDescription}-</Typography>-<hr-/>-</CardContent>-<CardActions-sx={{-display:-"flex",-justifyContent:-"center"-}}>-<DonateButton-ButtonName="Donate"-/>-</CardActions>-</Card>-</Grid>-{/*-</Grid>-*/}-</div>-);-}