From b8db2b0574dad5a08b5a35b0b4f28013002daa7f Mon Sep 17 00:00:00 2001
From: Daniel Silva <daniel5055@gmail.com>
Date: Fri, 17 May 2019 15:07:10 -0300
Subject: [PATCH] feat(Grid): Using mixed percentual max width, in Containers

---
 components/Grid/sub-components/Container.jsx | 26 +++++---------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/components/Grid/sub-components/Container.jsx b/components/Grid/sub-components/Container.jsx
index 06728acf3..d345b1986 100644
--- a/components/Grid/sub-components/Container.jsx
+++ b/components/Grid/sub-components/Container.jsx
@@ -1,11 +1,8 @@
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { query, hide, noGutters } from './shared';
+import { hide, noGutters } from './shared';
 import { breakpoints } from '../../shared/theme';
 
-const maxWidthStyle = ({ name, maxWidth }, fluid) =>
-  !fluid && Boolean(maxWidth) && query[name]`max-width: ${maxWidth}px;`;
-
 const Container = styled.div`
   width: ${props => props.width || '100%'};
   box-sizing: border-box;
@@ -13,24 +10,13 @@ const Container = styled.div`
   margin-right: auto;
   margin-left: auto;
 
-  ${({ fluid }) =>
-    Object.entries(breakpoints)
-      .map(([name, value]) => ({ name, ...value }))
-      .sort((a, b) => {
-        if (!a.maxWidth) {
-          return 1;
-        }
-
-        if (!b.maxWidth) {
-          return -1;
-        }
-
-        return a.maxWidth - b.maxWidth;
-      })
-      .map(breakpoint => maxWidthStyle(breakpoint, fluid))}
-
+  ${({ fluid }) => !fluid && 'max-width: 95%;'}
   ${hide}
   ${noGutters}
+
+  & & {
+    max-width: 100%;
+  }
 `;
 
 Container.propTypes = {