import { Box, styled } from '@mui/material'

export const StyledBox = styled(Box)({
  display: 'flex',
  justifyContent: 'space-between',
})

export const StyledBoxContainer = styled(Box)({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  margin: '10px 0',
})

export const StyledAvatar = styled(Box)({
  width: '100px',
  height: '100px',
  borderRadius: '10px',
  border: '1px solid #E5E5E5',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#E5E5E5',
})

export const StyledTextContainer = styled(Box)({
  marginTop: '8px',
  marginLeft: '20px',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
})

export const StyledBoxCard = styled(Box)({
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(500px, 1fr))',
  gap: '1rem',
})
