import { NewStepper } from '../../components/NewStepper';
import { styled } from '../../components/styled';
export const Wrapper = styled.section `
  display: flex;
  flex-direction: column;
`;
export const BeforeContentWrapper = styled.div `
  margin-bottom: ${({ theme }) => theme.spacing(4)};
  padding: ${({ theme }) => theme.spacing(0, 6)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-bottom: ${({ theme }) => theme.spacing(6)};
    padding: ${({ theme }) => theme.spacing(0, 4)};
  }
`;
export const StyledNewStepper = styled(NewStepper) `
  margin-bottom: ${({ theme }) => theme.spacing(5)};
  padding: ${({ theme }) => theme.spacing(0, 6)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-bottom: ${({ theme }) => theme.spacing(4)};
    padding: ${({ theme }) => theme.spacing(0, 4)};
  }
`;
export const FormContent = styled.div `
  padding: ${({ theme }) => theme.spacing(0, 6, 4)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding: ${({ theme }) => theme.spacing(0, 4, 4)};
  }
`;
