import { PageContent } from '../PageContent';
import { styled } from '../styled';
import { Typography } from '../Typography';
export const Wrapper = styled.div `
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(4)};
  align-items: center;
  justify-content: center;

  height: 100%;

  text-align: center;
`;
export const Header = styled(Typography) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    font-size: ${({ theme }) => theme.typography.h4.fontSize};
    line-height: ${({ theme }) => theme.typography.h4.lineHeight};
  }
`;
export const Subheader = styled(Typography) `
  margin-top: ${({ theme }) => theme.spacing(-2)};
  margin-bottom: ${({ theme }) => theme.spacing(2)};
  ${({ theme }) => theme.breakpoints.down('sm')} {
    font-size: ${({ theme }) => theme.typography.subtitle1.fontSize};
    line-height: ${({ theme }) => theme.typography.subtitle1.lineHeight};
  }
`;
export const Image = styled.img `
  width: 500px;
  height: 232px;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 326px;
    height: 166px;
  }
`;
export const StyledPageContent = styled(PageContent) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-top: ${({ theme }) => theme.spacing(4)};
  }
`;
