import React from 'react';
import styled from 'styled-components';

function AuthMainwrapper({ children }) {
  return /*#__PURE__*/ React.createElement(
    Mainwrapper,
    {
      className: 'auth-main-wrapper',
    },
    /*#__PURE__*/ React.createElement(
      ContentWrapper,
      {
        className: 'auth-content-wrapper',
      },
      children
    )
  );
}

export { AuthMainwrapper };
const Mainwrapper = styled.div`
  background: #ffffff url(/images/auth-image.png) no-repeat top;
  background-size: 100% 250px;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;
const ContentWrapper = styled.section`
  box-shadow: var(--shadow);
  background: #fff;
  border-radius: var(--border-radius);
  width: 90%;
  padding: 5rem 9rem;
  border: 1px solid #e8edff;
  @media (min-width: 768px) {
    width: 600px;
  }
`;
