import styled from 'styled-components';
import { Box } from 'UIKit/grid';
import { min } from 'UIKit/mq';
import Form from './Form';
import Results from './Results';
import Settings from './Settings';

const Grid = styled(Box)`
  display: flex;
  flex-direction: column;
  gap: 10px;

  ${min('laptop')} {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 2fr 1fr;
  }

  ${min('desktop')} {
    grid-template-columns: 2fr 1fr 1.5fr;
    margin: 8px 5%;
  }

  ${min('desktop-xl')} {
    margin: 8px 10%;
  }
`;

export default function Calculation() {
  return (
    <Grid>
      <Form />
      <Settings />
      <Results />
    </Grid>
  );
}