text: import styled from "styled-components"
  
  export const Container = styled.div`
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
  
    @media (min-width: ${props => props.theme.screen.xs}) {
      max-width: 540px;
    }
  
    @media (min-width: ${props => props.theme.screen.sm}) {
      max-width: 720px;
    }
  
    @media (min-width: ${props => props.theme.screen.md}) {
      max-width: 960px;
    }
  
    @media (min-width: ${props => props.theme.screen.lg}) {
      max-width: 1200px;
    }
  
    ${props =>
      props.fluid &&
      `
      max-width: 1200px !important;
    `};
  `
  
  export const BackgroundTitle = styled.h5`
    ${props => props.theme.font_size.large};
    ${props => props.theme.font.bold};
    color: ${props => props.theme.color.black.lightest};
    letter-spacing: 10px;
    opacity: 0.4;
    margin-bottom: -20px;
    text-align: center;
  `
  
  export const SectionTitle = styled.h1`
    ${props => props.theme.font_size.larger};
    color: ${props => props.theme.color.primary};
    display: flex;
    justify-content: center;
    margin: 0 auto 28px;
    text-align: center;
  `
  
  export const Section = styled.section`
    padding: 80px 0;
    overflow: hidden;
    background-color: ${props => {
      switch (props.accent) {
        case "secondary":
          return props.theme.color.white.dark
        case "main":
          return props.theme.color.primary
        default:
          return "white"
      }
    }};
  
    @media (max-width: ${props => props.theme.screen.md}) {
      padding: 80px 0;
    }
  
    ${props =>
      props.accent &&
      `background-color: ${
        props.accent === "secondary"
          ? props.theme.color.white.dark
          : props.theme.color.primary
      }`};
  `
  