From c4380b3e12cd25a1eca1eacb7451ec895ab072cb Mon Sep 17 00:00:00 2001
From: Jamie Warburton <jamie@hexdigital.com>
Date: Mon, 28 Dec 2020 15:39:39 +0000
Subject: [PATCH] fix: fix wrapper__wide element

The wrapper wide was smaller than the actual wrapper on screens less than xl
---
 src/objects/wrapper.js | 8 +++++---
 test/src/index.html    | 2 ++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/objects/wrapper.js b/src/objects/wrapper.js
index 5109327..bb406d2 100644
--- a/src/objects/wrapper.js
+++ b/src/objects/wrapper.js
@@ -78,9 +78,11 @@ module.exports = function ({ addComponents, config, theme, variants, e }) {
         ...generatePaddingFor(0),
 
         '&__wide': {
-          marginLeft: 'calc(-75vw / 2 + 100% / 2)',
-          marginRight: 'calc(-75vw / 2 + 100% / 2)',
-          maxWidth: 'none',
+          maxWidth: '100vw',
+          '@screen xl': {
+            marginLeft: 'calc(-90vw / 2 + 100% / 2)',
+            marginRight: 'calc(-90vw / 2 + 100% / 2)',
+          },
         },
         '&__bleed': {
           marginLeft: 'calc(-100vw / 2 + 100% / 2)',
diff --git a/test/src/index.html b/test/src/index.html
index 415fe0e..27c0d77 100644
--- a/test/src/index.html
+++ b/test/src/index.html
@@ -27,6 +27,8 @@ <h1 class="u-text-blue-500 u-mb-4">Lorem Ipsum</h1>
         eleifend, tempus est eu, facilisis turpis. Duis quis sagittis libero. Donec vitae eros ac turpis mattis
         vulputate.</p>
     </div>
+    <div class="u-p-12 u-bg-indigo-300 u-wrapper__wide">This is a wide wrapper</div>
+    <div class="u-p-12 u-bg-blue-300 u-wrapper__bleed">This is a bleed wrapper</div>
   </div>
 </div>
 </body>