import { padding, spacing } from '@gympass/yoga-system';

const SquareWrapper = styled.div`
  border: 1px solid tomato;

  ${padding}
`;

const Square = styled.div`
  border: 1px solid;

  ${spacing}
`;

render(() => {
  return (
    <SquareWrapper p="xxxsmall">
      <Square ph="medium" paddingVertical="small" mb="medium">
        Everyone can be happy and healthy
      </Square>
    </SquareWrapper>
  );
});
const SquareWrapper = styled.div`
  border: 1px solid tomato;

  ${padding}
`;

const Square = styled.div`
  border: 1px solid;

  ${spacing}
`;

render(() => {
  return (
    <SquareWrapper p="xxxsmall">
      <Square ph="medium" paddingVertical="small" mb="medium">
        Everyone can be happy and healthy
      </Square>
    </SquareWrapper>
  );
});