text: import { makeStyles } from '@material-ui/styles';
  
  const blogCardStyle = makeStyles(({ breakpoints, spacing }) => ({
      root: {
        margin: 'auto',
        borderRadius: spacing(2), // 16px
        transition: '0.3s',
        boxShadow: '0px 14px 80px rgba(34, 35, 58, 0.2)',
        position: 'relative',
        maxWidth: 500,
        marginLeft: 'auto',
        overflow: 'initial',
        background: '#ffffff',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        paddingBottom: spacing(2),
        [breakpoints.up('md')]: {
          flexDirection: 'row',
          paddingTop: spacing(2),
        },
      },
      media: {
        width: '88%',
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: spacing(-3),
        height: 0,
        paddingBottom: '48%',
        borderRadius: spacing(2),
        backgroundColor: '#fff',
        position: 'relative',
        [breakpoints.up('md')]: {
          width: '100%',
          marginLeft: spacing(-3),
          marginTop: 0,
          transform: 'translateX(-8px)',
        },
        '&:after': {
          content: '" "',
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          //backgroundImage: 'linear-gradient(147deg, #fe8a39 0%, #fd3838 74%)',
          borderRadius: spacing(2), // 16
          opacity: 0.5,
        },
      },
      content: {
        padding: 24,
      },
      cta: {
        marginTop: 24,
        textTransform: 'initial',
      },
    }));
  
  export default blogCardStyle;
  