import React from "react" ; import styled from "styled-components" ; interface SectionWrapperProps { id : string ; className ? : string ; children ? : any ; } const Container = styled . section `
  position: relative;
  margin: auto;
  box-sizing: border-box;
  overflow-x: hidden;

  min-height: 100vh;
  max-width: ${ props => props . theme . globalConstants . width . sectionsLarge }px;
  width: 100%;


  padding: ${ props => props . theme . globalConstants . padding . sectionsLarge }px;
  ${ props => props . theme . mediaQueries . medium `
    padding: ${ props . theme . globalConstants . padding . sectionsMedium }px;
  ` }
  ${ props => props . theme . mediaQueries . tablet `
    padding: ${ props . theme . globalConstants . padding . sectionsTablet }px;
  ` }
  ${ props => props . theme . mediaQueries . tabletMobile `
    padding: ${ props . theme . globalConstants . padding . sectionsTabletMobile }px;
  ` }
  ${ props => props . theme . mediaQueries . mobile `
    padding: ${ props . theme . globalConstants . padding . sectionsMobile }px;
  ` }
  ${ props => props . theme . mediaQueries . smallMobile `
    padding: ${ props . theme . globalConstants . padding . sectionsSmallMobile }px;
  ` }
` ; const SectionWrapper = ( { id , className , children } ) => ( < Container id = { id } className = { className } > { children } < /Container>); export default SectionWrapper ;