import { Grid } from '../../Grid';
import { styled } from '../../styled';
export const Container = styled.article `
  width: 100%;
  height: 100%;

  color: ${({ theme }) => theme.palette.grey[900]};
`;
export const Image = styled.img `
  display: block;

  width: 100%;
  max-width: 100%;
  height: 160px;
  max-height: 100%;

  object-fit: contain;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    object-fit: cover;
  }
`;
export const Wrapper = styled(Grid) `
  gap: ${({ theme }) => theme.spacing(6)};

  padding: ${({ theme }) => theme.spacing(8, 6, 6)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.spacing(8)};

    padding: ${({ theme }) => theme.spacing(4)};
  }
`;
export const WrapperTextContent = styled(Grid) `
  gap: ${({ theme }) => theme.spacing(2)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.spacing(3)};
  }
`;
export const Footer = styled.footer `
  display: flex;
  gap: ${({ theme }) => theme.spacing(4)};
  align-items: center;
  justify-content: flex-end;
`;
