import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";

const Container = styled.div`
  display: flex;
  flex-flow: row wrap;
  position: relative;
  padding: 0;
  min-height: 55vh;
  justify-content: space-between;

  @media screen and (max-width: ${breakpoints.mobile}) {
    flex-direction: column;
  }

  color: ${colors.white};
  background-color: ${colors.darkBlue};

  a:hover {
    color: ${colors.white};
  }
`;

const Hero: React.FC = ({ children }) => (
  <Container>
    {children}
  </Container>
);

export default Hero;