import { min } from '@/styles/mq';
import styled from 'styled-components';
import { Box } from 'ui/grid';

export 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% !important;
  }
`;