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

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

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

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

export const AvatarStyled = styled(Avatar)({
  height: '50px',
  width: '50px',
  backgroundColor: '#F4F4F4',
  marginRight: '10px',
})
