From 12dd81b90681136139ada567096bdd534a4346d4 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 22 Nov 2017 16:46:52 -0500
Subject: [PATCH 1/3] Working on `@variants` at-rule

Currently supports focus and hover, need to add responsive which will be a whole horrible can of worms.
---
 __tests__/variantsAtRule.test.js     | 71 ++++++++++++++++++++++++++++
 src/lib/substituteVariantsAtRules.js | 41 ++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 __tests__/variantsAtRule.test.js
 create mode 100644 src/lib/substituteVariantsAtRules.js

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
new file mode 100644
index 000000000..2a4636fb4
--- /dev/null
+++ b/__tests__/variantsAtRule.test.js
@@ -0,0 +1,71 @@
+import postcss from 'postcss'
+import plugin from '../src/lib/substituteVariantsAtRules'
+
+function run(input, opts = () => {}) {
+  return postcss([plugin(opts)]).process(input)
+}
+
+test('it can generate hover variants', () => {
+  const input = `
+    @variants hover {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test('it can generate focus variants', () => {
+  const input = `
+    @variants focus {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test('it can generate hover and focus variants', () => {
+  const input = `
+    @variants hover, focus {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
new file mode 100644
index 000000000..b95e6b706
--- /dev/null
+++ b/src/lib/substituteVariantsAtRules.js
@@ -0,0 +1,41 @@
+import _ from 'lodash'
+import postcss from 'postcss'
+
+const variantGenerators = {
+  hover: (rule) => {
+    const clonedRule = rule.clone()
+
+    clonedRule.walkRules(rule => {
+      rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
+    })
+
+    return clonedRule.nodes
+  },
+  focus: (rule) => {
+    const clonedRule = rule.clone()
+
+    clonedRule.walkRules(rule => {
+      rule.selector = `.focus\\:${rule.selector.slice(1)}:focus`
+    })
+
+    return clonedRule.nodes
+  },
+}
+
+export default function() {
+  return function(css) {
+    css.walkAtRules('variants', atRule => {
+      const variants = postcss.list.comma(atRule.params)
+
+      atRule.before(atRule.clone().nodes)
+
+      _.forEach(['focus', 'hover'], (variant) => {
+        if (variants.includes(variant)) {
+          atRule.before(variantGenerators[variant](atRule))
+        }
+      })
+
+      atRule.remove()
+    })
+  }
+}

From ebb8633809b34e09784562a2829c9028feb1c42b Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 23 Nov 2017 09:58:25 -0500
Subject: [PATCH 2/3] Fix tests and style

---
 __tests__/fixtures/tailwind-output.css | 5985 +++++++++++++++++++-----
 jest/customMatchers.js                 |   11 +-
 src/lib/substituteHoverableAtRules.js  |    2 -
 src/lib/substituteVariantsAtRules.js   |   18 +-
 4 files changed, 4804 insertions(+), 1212 deletions(-)

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
index f32405ed0..6abbbd372 100644
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -647,47 +647,74 @@ button,
   font-size: 3rem;
 }
 
-.font-hairline,
+.font-hairline {
+  font-weight: 100;
+}
+
+.font-thin {
+  font-weight: 200;
+}
+
+.font-light {
+  font-weight: 300;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.font-black {
+  font-weight: 900;
+}
+
 .hover\:font-hairline:hover {
   font-weight: 100;
 }
 
-.font-thin,
 .hover\:font-thin:hover {
   font-weight: 200;
 }
 
-.font-light,
 .hover\:font-light:hover {
   font-weight: 300;
 }
 
-.font-normal,
 .hover\:font-normal:hover {
   font-weight: 400;
 }
 
-.font-medium,
 .hover\:font-medium:hover {
   font-weight: 500;
 }
 
-.font-semibold,
 .hover\:font-semibold:hover {
   font-weight: 600;
 }
 
-.font-bold,
 .hover\:font-bold:hover {
   font-weight: 700;
 }
 
-.font-extrabold,
 .hover\:font-extrabold:hover {
   font-weight: 800;
 }
 
-.font-black,
 .hover\:font-black:hover {
   font-weight: 900;
 }
@@ -704,367 +731,586 @@ button,
   font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
 
-.text-transparent,
+.text-transparent {
+  color: transparent;
+}
+
+.text-black {
+  color: #222b2f;
+}
+
+.text-grey-darkest {
+  color: #364349;
+}
+
+.text-grey-darker {
+  color: #596a73;
+}
+
+.text-grey-dark {
+  color: #70818a;
+}
+
+.text-grey {
+  color: #9babb4;
+}
+
+.text-grey-light {
+  color: #dae4e9;
+}
+
+.text-grey-lighter {
+  color: #f3f7f9;
+}
+
+.text-grey-lightest {
+  color: #fafcfc;
+}
+
+.text-white {
+  color: #ffffff;
+}
+
+.text-red-darkest {
+  color: #420806;
+}
+
+.text-red-darker {
+  color: #6a1b19;
+}
+
+.text-red-dark {
+  color: #cc1f1a;
+}
+
+.text-red {
+  color: #e3342f;
+}
+
+.text-red-light {
+  color: #ef5753;
+}
+
+.text-red-lighter {
+  color: #f9acaa;
+}
+
+.text-red-lightest {
+  color: #fcebea;
+}
+
+.text-orange-darkest {
+  color: #542605;
+}
+
+.text-orange-darker {
+  color: #7f4012;
+}
+
+.text-orange-dark {
+  color: #de751f;
+}
+
+.text-orange {
+  color: #f6993f;
+}
+
+.text-orange-light {
+  color: #faad63;
+}
+
+.text-orange-lighter {
+  color: #fcd9b6;
+}
+
+.text-orange-lightest {
+  color: #fff5eb;
+}
+
+.text-yellow-darkest {
+  color: #453411;
+}
+
+.text-yellow-darker {
+  color: #684f1d;
+}
+
+.text-yellow-dark {
+  color: #f2d024;
+}
+
+.text-yellow {
+  color: #ffed4a;
+}
+
+.text-yellow-light {
+  color: #fff382;
+}
+
+.text-yellow-lighter {
+  color: #fff9c2;
+}
+
+.text-yellow-lightest {
+  color: #fcfbeb;
+}
+
+.text-green-darkest {
+  color: #032d19;
+}
+
+.text-green-darker {
+  color: #0b4228;
+}
+
+.text-green-dark {
+  color: #1f9d55;
+}
+
+.text-green {
+  color: #38c172;
+}
+
+.text-green-light {
+  color: #51d88a;
+}
+
+.text-green-lighter {
+  color: #a2f5bf;
+}
+
+.text-green-lightest {
+  color: #e3fcec;
+}
+
+.text-teal-darkest {
+  color: #0d3331;
+}
+
+.text-teal-darker {
+  color: #174e4b;
+}
+
+.text-teal-dark {
+  color: #38a89d;
+}
+
+.text-teal {
+  color: #4dc0b5;
+}
+
+.text-teal-light {
+  color: #64d5ca;
+}
+
+.text-teal-lighter {
+  color: #a0f0ed;
+}
+
+.text-teal-lightest {
+  color: #e8fffe;
+}
+
+.text-blue-darkest {
+  color: #05233b;
+}
+
+.text-blue-darker {
+  color: #103d60;
+}
+
+.text-blue-dark {
+  color: #2779bd;
+}
+
+.text-blue {
+  color: #3490dc;
+}
+
+.text-blue-light {
+  color: #6cb2eb;
+}
+
+.text-blue-lighter {
+  color: #bcdefa;
+}
+
+.text-blue-lightest {
+  color: #eff8ff;
+}
+
+.text-indigo-darkest {
+  color: #191e38;
+}
+
+.text-indigo-darker {
+  color: #2f365f;
+}
+
+.text-indigo-dark {
+  color: #5661b3;
+}
+
+.text-indigo {
+  color: #6574cd;
+}
+
+.text-indigo-light {
+  color: #7886d7;
+}
+
+.text-indigo-lighter {
+  color: #b2b7ff;
+}
+
+.text-indigo-lightest {
+  color: #e6e8ff;
+}
+
+.text-purple-darkest {
+  color: #1f133f;
+}
+
+.text-purple-darker {
+  color: #352465;
+}
+
+.text-purple-dark {
+  color: #794acf;
+}
+
+.text-purple {
+  color: #9561e2;
+}
+
+.text-purple-light {
+  color: #a779e9;
+}
+
+.text-purple-lighter {
+  color: #d6bbfc;
+}
+
+.text-purple-lightest {
+  color: #f3ebff;
+}
+
+.text-pink-darkest {
+  color: #45051e;
+}
+
+.text-pink-darker {
+  color: #72173a;
+}
+
+.text-pink-dark {
+  color: #eb5286;
+}
+
+.text-pink {
+  color: #f66d9b;
+}
+
+.text-pink-light {
+  color: #fa7ea8;
+}
+
+.text-pink-lighter {
+  color: #ffbbca;
+}
+
+.text-pink-lightest {
+  color: #ffebef;
+}
+
 .hover\:text-transparent:hover {
   color: transparent;
 }
 
-.text-black,
 .hover\:text-black:hover {
   color: #222b2f;
 }
 
-.text-grey-darkest,
 .hover\:text-grey-darkest:hover {
   color: #364349;
 }
 
-.text-grey-darker,
 .hover\:text-grey-darker:hover {
   color: #596a73;
 }
 
-.text-grey-dark,
 .hover\:text-grey-dark:hover {
   color: #70818a;
 }
 
-.text-grey,
 .hover\:text-grey:hover {
   color: #9babb4;
 }
 
-.text-grey-light,
 .hover\:text-grey-light:hover {
   color: #dae4e9;
 }
 
-.text-grey-lighter,
 .hover\:text-grey-lighter:hover {
   color: #f3f7f9;
 }
 
-.text-grey-lightest,
 .hover\:text-grey-lightest:hover {
   color: #fafcfc;
 }
 
-.text-white,
 .hover\:text-white:hover {
   color: #ffffff;
 }
 
-.text-red-darkest,
 .hover\:text-red-darkest:hover {
   color: #420806;
 }
 
-.text-red-darker,
 .hover\:text-red-darker:hover {
   color: #6a1b19;
 }
 
-.text-red-dark,
 .hover\:text-red-dark:hover {
   color: #cc1f1a;
 }
 
-.text-red,
 .hover\:text-red:hover {
   color: #e3342f;
 }
 
-.text-red-light,
 .hover\:text-red-light:hover {
   color: #ef5753;
 }
 
-.text-red-lighter,
 .hover\:text-red-lighter:hover {
   color: #f9acaa;
 }
 
-.text-red-lightest,
 .hover\:text-red-lightest:hover {
   color: #fcebea;
 }
 
-.text-orange-darkest,
 .hover\:text-orange-darkest:hover {
   color: #542605;
 }
 
-.text-orange-darker,
 .hover\:text-orange-darker:hover {
   color: #7f4012;
 }
 
-.text-orange-dark,
 .hover\:text-orange-dark:hover {
   color: #de751f;
 }
 
-.text-orange,
 .hover\:text-orange:hover {
   color: #f6993f;
 }
 
-.text-orange-light,
 .hover\:text-orange-light:hover {
   color: #faad63;
 }
 
-.text-orange-lighter,
 .hover\:text-orange-lighter:hover {
   color: #fcd9b6;
 }
 
-.text-orange-lightest,
 .hover\:text-orange-lightest:hover {
   color: #fff5eb;
 }
 
-.text-yellow-darkest,
 .hover\:text-yellow-darkest:hover {
   color: #453411;
 }
 
-.text-yellow-darker,
 .hover\:text-yellow-darker:hover {
   color: #684f1d;
 }
 
-.text-yellow-dark,
 .hover\:text-yellow-dark:hover {
   color: #f2d024;
 }
 
-.text-yellow,
 .hover\:text-yellow:hover {
   color: #ffed4a;
 }
 
-.text-yellow-light,
 .hover\:text-yellow-light:hover {
   color: #fff382;
 }
 
-.text-yellow-lighter,
 .hover\:text-yellow-lighter:hover {
   color: #fff9c2;
 }
 
-.text-yellow-lightest,
 .hover\:text-yellow-lightest:hover {
   color: #fcfbeb;
 }
 
-.text-green-darkest,
 .hover\:text-green-darkest:hover {
   color: #032d19;
 }
 
-.text-green-darker,
 .hover\:text-green-darker:hover {
   color: #0b4228;
 }
 
-.text-green-dark,
 .hover\:text-green-dark:hover {
   color: #1f9d55;
 }
 
-.text-green,
 .hover\:text-green:hover {
   color: #38c172;
 }
 
-.text-green-light,
 .hover\:text-green-light:hover {
   color: #51d88a;
 }
 
-.text-green-lighter,
 .hover\:text-green-lighter:hover {
   color: #a2f5bf;
 }
 
-.text-green-lightest,
 .hover\:text-green-lightest:hover {
   color: #e3fcec;
 }
 
-.text-teal-darkest,
 .hover\:text-teal-darkest:hover {
   color: #0d3331;
 }
 
-.text-teal-darker,
 .hover\:text-teal-darker:hover {
   color: #174e4b;
 }
 
-.text-teal-dark,
 .hover\:text-teal-dark:hover {
   color: #38a89d;
 }
 
-.text-teal,
 .hover\:text-teal:hover {
   color: #4dc0b5;
 }
 
-.text-teal-light,
 .hover\:text-teal-light:hover {
   color: #64d5ca;
 }
 
-.text-teal-lighter,
 .hover\:text-teal-lighter:hover {
   color: #a0f0ed;
 }
 
-.text-teal-lightest,
 .hover\:text-teal-lightest:hover {
   color: #e8fffe;
 }
 
-.text-blue-darkest,
 .hover\:text-blue-darkest:hover {
   color: #05233b;
 }
 
-.text-blue-darker,
 .hover\:text-blue-darker:hover {
   color: #103d60;
 }
 
-.text-blue-dark,
 .hover\:text-blue-dark:hover {
   color: #2779bd;
 }
 
-.text-blue,
 .hover\:text-blue:hover {
   color: #3490dc;
 }
 
-.text-blue-light,
 .hover\:text-blue-light:hover {
   color: #6cb2eb;
 }
 
-.text-blue-lighter,
 .hover\:text-blue-lighter:hover {
   color: #bcdefa;
 }
 
-.text-blue-lightest,
 .hover\:text-blue-lightest:hover {
   color: #eff8ff;
 }
 
-.text-indigo-darkest,
 .hover\:text-indigo-darkest:hover {
   color: #191e38;
 }
 
-.text-indigo-darker,
 .hover\:text-indigo-darker:hover {
   color: #2f365f;
 }
 
-.text-indigo-dark,
 .hover\:text-indigo-dark:hover {
   color: #5661b3;
 }
 
-.text-indigo,
 .hover\:text-indigo:hover {
   color: #6574cd;
 }
 
-.text-indigo-light,
 .hover\:text-indigo-light:hover {
   color: #7886d7;
 }
 
-.text-indigo-lighter,
 .hover\:text-indigo-lighter:hover {
   color: #b2b7ff;
 }
 
-.text-indigo-lightest,
 .hover\:text-indigo-lightest:hover {
   color: #e6e8ff;
 }
 
-.text-purple-darkest,
 .hover\:text-purple-darkest:hover {
   color: #1f133f;
 }
 
-.text-purple-darker,
 .hover\:text-purple-darker:hover {
   color: #352465;
 }
 
-.text-purple-dark,
 .hover\:text-purple-dark:hover {
   color: #794acf;
 }
 
-.text-purple,
 .hover\:text-purple:hover {
   color: #9561e2;
 }
 
-.text-purple-light,
 .hover\:text-purple-light:hover {
   color: #a779e9;
 }
 
-.text-purple-lighter,
 .hover\:text-purple-lighter:hover {
   color: #d6bbfc;
 }
 
-.text-purple-lightest,
 .hover\:text-purple-lightest:hover {
   color: #f3ebff;
 }
 
-.text-pink-darkest,
 .hover\:text-pink-darkest:hover {
   color: #45051e;
 }
 
-.text-pink-darker,
 .hover\:text-pink-darker:hover {
   color: #72173a;
 }
 
-.text-pink-dark,
 .hover\:text-pink-dark:hover {
   color: #eb5286;
 }
 
-.text-pink,
 .hover\:text-pink:hover {
   color: #f66d9b;
 }
 
-.text-pink-light,
 .hover\:text-pink-light:hover {
   color: #fa7ea8;
 }
 
-.text-pink-lighter,
 .hover\:text-pink-lighter:hover {
   color: #ffbbca;
 }
 
-.text-pink-lightest,
 .hover\:text-pink-lightest:hover {
   color: #ffebef;
 }
@@ -1147,58 +1393,93 @@ button,
   white-space: nowrap;
 }
 
-.italic,
+.italic {
+  font-style: italic;
+}
+
+.roman {
+  font-style: normal;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.lowercase {
+  text-transform: lowercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.normal-case {
+  text-transform: none;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.line-through {
+  text-decoration: line-through;
+}
+
+.no-underline {
+  text-decoration: none;
+}
+
+.antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.subpixel-antialiased {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+}
+
 .hover\:italic:hover {
   font-style: italic;
 }
 
-.roman,
 .hover\:roman:hover {
   font-style: normal;
 }
 
-.uppercase,
 .hover\:uppercase:hover {
   text-transform: uppercase;
 }
 
-.lowercase,
 .hover\:lowercase:hover {
   text-transform: lowercase;
 }
 
-.capitalize,
 .hover\:capitalize:hover {
   text-transform: capitalize;
 }
 
-.normal-case,
 .hover\:normal-case:hover {
   text-transform: none;
 }
 
-.underline,
 .hover\:underline:hover {
   text-decoration: underline;
 }
 
-.line-through,
 .hover\:line-through:hover {
   text-decoration: line-through;
 }
 
-.no-underline,
 .hover\:no-underline:hover {
   text-decoration: none;
 }
 
-.antialiased,
 .hover\:antialiased:hover {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.subpixel-antialiased,
 .hover\:subpixel-antialiased:hover {
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
@@ -1228,367 +1509,586 @@ button,
   vertical-align: text-bottom;
 }
 
-.bg-transparent,
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-black {
+  background-color: #222b2f;
+}
+
+.bg-grey-darkest {
+  background-color: #364349;
+}
+
+.bg-grey-darker {
+  background-color: #596a73;
+}
+
+.bg-grey-dark {
+  background-color: #70818a;
+}
+
+.bg-grey {
+  background-color: #9babb4;
+}
+
+.bg-grey-light {
+  background-color: #dae4e9;
+}
+
+.bg-grey-lighter {
+  background-color: #f3f7f9;
+}
+
+.bg-grey-lightest {
+  background-color: #fafcfc;
+}
+
+.bg-white {
+  background-color: #ffffff;
+}
+
+.bg-red-darkest {
+  background-color: #420806;
+}
+
+.bg-red-darker {
+  background-color: #6a1b19;
+}
+
+.bg-red-dark {
+  background-color: #cc1f1a;
+}
+
+.bg-red {
+  background-color: #e3342f;
+}
+
+.bg-red-light {
+  background-color: #ef5753;
+}
+
+.bg-red-lighter {
+  background-color: #f9acaa;
+}
+
+.bg-red-lightest {
+  background-color: #fcebea;
+}
+
+.bg-orange-darkest {
+  background-color: #542605;
+}
+
+.bg-orange-darker {
+  background-color: #7f4012;
+}
+
+.bg-orange-dark {
+  background-color: #de751f;
+}
+
+.bg-orange {
+  background-color: #f6993f;
+}
+
+.bg-orange-light {
+  background-color: #faad63;
+}
+
+.bg-orange-lighter {
+  background-color: #fcd9b6;
+}
+
+.bg-orange-lightest {
+  background-color: #fff5eb;
+}
+
+.bg-yellow-darkest {
+  background-color: #453411;
+}
+
+.bg-yellow-darker {
+  background-color: #684f1d;
+}
+
+.bg-yellow-dark {
+  background-color: #f2d024;
+}
+
+.bg-yellow {
+  background-color: #ffed4a;
+}
+
+.bg-yellow-light {
+  background-color: #fff382;
+}
+
+.bg-yellow-lighter {
+  background-color: #fff9c2;
+}
+
+.bg-yellow-lightest {
+  background-color: #fcfbeb;
+}
+
+.bg-green-darkest {
+  background-color: #032d19;
+}
+
+.bg-green-darker {
+  background-color: #0b4228;
+}
+
+.bg-green-dark {
+  background-color: #1f9d55;
+}
+
+.bg-green {
+  background-color: #38c172;
+}
+
+.bg-green-light {
+  background-color: #51d88a;
+}
+
+.bg-green-lighter {
+  background-color: #a2f5bf;
+}
+
+.bg-green-lightest {
+  background-color: #e3fcec;
+}
+
+.bg-teal-darkest {
+  background-color: #0d3331;
+}
+
+.bg-teal-darker {
+  background-color: #174e4b;
+}
+
+.bg-teal-dark {
+  background-color: #38a89d;
+}
+
+.bg-teal {
+  background-color: #4dc0b5;
+}
+
+.bg-teal-light {
+  background-color: #64d5ca;
+}
+
+.bg-teal-lighter {
+  background-color: #a0f0ed;
+}
+
+.bg-teal-lightest {
+  background-color: #e8fffe;
+}
+
+.bg-blue-darkest {
+  background-color: #05233b;
+}
+
+.bg-blue-darker {
+  background-color: #103d60;
+}
+
+.bg-blue-dark {
+  background-color: #2779bd;
+}
+
+.bg-blue {
+  background-color: #3490dc;
+}
+
+.bg-blue-light {
+  background-color: #6cb2eb;
+}
+
+.bg-blue-lighter {
+  background-color: #bcdefa;
+}
+
+.bg-blue-lightest {
+  background-color: #eff8ff;
+}
+
+.bg-indigo-darkest {
+  background-color: #191e38;
+}
+
+.bg-indigo-darker {
+  background-color: #2f365f;
+}
+
+.bg-indigo-dark {
+  background-color: #5661b3;
+}
+
+.bg-indigo {
+  background-color: #6574cd;
+}
+
+.bg-indigo-light {
+  background-color: #7886d7;
+}
+
+.bg-indigo-lighter {
+  background-color: #b2b7ff;
+}
+
+.bg-indigo-lightest {
+  background-color: #e6e8ff;
+}
+
+.bg-purple-darkest {
+  background-color: #1f133f;
+}
+
+.bg-purple-darker {
+  background-color: #352465;
+}
+
+.bg-purple-dark {
+  background-color: #794acf;
+}
+
+.bg-purple {
+  background-color: #9561e2;
+}
+
+.bg-purple-light {
+  background-color: #a779e9;
+}
+
+.bg-purple-lighter {
+  background-color: #d6bbfc;
+}
+
+.bg-purple-lightest {
+  background-color: #f3ebff;
+}
+
+.bg-pink-darkest {
+  background-color: #45051e;
+}
+
+.bg-pink-darker {
+  background-color: #72173a;
+}
+
+.bg-pink-dark {
+  background-color: #eb5286;
+}
+
+.bg-pink {
+  background-color: #f66d9b;
+}
+
+.bg-pink-light {
+  background-color: #fa7ea8;
+}
+
+.bg-pink-lighter {
+  background-color: #ffbbca;
+}
+
+.bg-pink-lightest {
+  background-color: #ffebef;
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
 
-.bg-black,
 .hover\:bg-black:hover {
   background-color: #222b2f;
 }
 
-.bg-grey-darkest,
 .hover\:bg-grey-darkest:hover {
   background-color: #364349;
 }
 
-.bg-grey-darker,
 .hover\:bg-grey-darker:hover {
   background-color: #596a73;
 }
 
-.bg-grey-dark,
 .hover\:bg-grey-dark:hover {
   background-color: #70818a;
 }
 
-.bg-grey,
 .hover\:bg-grey:hover {
   background-color: #9babb4;
 }
 
-.bg-grey-light,
 .hover\:bg-grey-light:hover {
   background-color: #dae4e9;
 }
 
-.bg-grey-lighter,
 .hover\:bg-grey-lighter:hover {
   background-color: #f3f7f9;
 }
 
-.bg-grey-lightest,
 .hover\:bg-grey-lightest:hover {
   background-color: #fafcfc;
 }
 
-.bg-white,
 .hover\:bg-white:hover {
   background-color: #ffffff;
 }
 
-.bg-red-darkest,
 .hover\:bg-red-darkest:hover {
   background-color: #420806;
 }
 
-.bg-red-darker,
 .hover\:bg-red-darker:hover {
   background-color: #6a1b19;
 }
 
-.bg-red-dark,
 .hover\:bg-red-dark:hover {
   background-color: #cc1f1a;
 }
 
-.bg-red,
 .hover\:bg-red:hover {
   background-color: #e3342f;
 }
 
-.bg-red-light,
 .hover\:bg-red-light:hover {
   background-color: #ef5753;
 }
 
-.bg-red-lighter,
 .hover\:bg-red-lighter:hover {
   background-color: #f9acaa;
 }
 
-.bg-red-lightest,
 .hover\:bg-red-lightest:hover {
   background-color: #fcebea;
 }
 
-.bg-orange-darkest,
 .hover\:bg-orange-darkest:hover {
   background-color: #542605;
 }
 
-.bg-orange-darker,
 .hover\:bg-orange-darker:hover {
   background-color: #7f4012;
 }
 
-.bg-orange-dark,
 .hover\:bg-orange-dark:hover {
   background-color: #de751f;
 }
 
-.bg-orange,
 .hover\:bg-orange:hover {
   background-color: #f6993f;
 }
 
-.bg-orange-light,
 .hover\:bg-orange-light:hover {
   background-color: #faad63;
 }
 
-.bg-orange-lighter,
 .hover\:bg-orange-lighter:hover {
   background-color: #fcd9b6;
 }
 
-.bg-orange-lightest,
 .hover\:bg-orange-lightest:hover {
   background-color: #fff5eb;
 }
 
-.bg-yellow-darkest,
 .hover\:bg-yellow-darkest:hover {
   background-color: #453411;
 }
 
-.bg-yellow-darker,
 .hover\:bg-yellow-darker:hover {
   background-color: #684f1d;
 }
 
-.bg-yellow-dark,
 .hover\:bg-yellow-dark:hover {
   background-color: #f2d024;
 }
 
-.bg-yellow,
 .hover\:bg-yellow:hover {
   background-color: #ffed4a;
 }
 
-.bg-yellow-light,
 .hover\:bg-yellow-light:hover {
   background-color: #fff382;
 }
 
-.bg-yellow-lighter,
 .hover\:bg-yellow-lighter:hover {
   background-color: #fff9c2;
 }
 
-.bg-yellow-lightest,
 .hover\:bg-yellow-lightest:hover {
   background-color: #fcfbeb;
 }
 
-.bg-green-darkest,
 .hover\:bg-green-darkest:hover {
   background-color: #032d19;
 }
 
-.bg-green-darker,
 .hover\:bg-green-darker:hover {
   background-color: #0b4228;
 }
 
-.bg-green-dark,
 .hover\:bg-green-dark:hover {
   background-color: #1f9d55;
 }
 
-.bg-green,
 .hover\:bg-green:hover {
   background-color: #38c172;
 }
 
-.bg-green-light,
 .hover\:bg-green-light:hover {
   background-color: #51d88a;
 }
 
-.bg-green-lighter,
 .hover\:bg-green-lighter:hover {
   background-color: #a2f5bf;
 }
 
-.bg-green-lightest,
 .hover\:bg-green-lightest:hover {
   background-color: #e3fcec;
 }
 
-.bg-teal-darkest,
 .hover\:bg-teal-darkest:hover {
   background-color: #0d3331;
 }
 
-.bg-teal-darker,
 .hover\:bg-teal-darker:hover {
   background-color: #174e4b;
 }
 
-.bg-teal-dark,
 .hover\:bg-teal-dark:hover {
   background-color: #38a89d;
 }
 
-.bg-teal,
 .hover\:bg-teal:hover {
   background-color: #4dc0b5;
 }
 
-.bg-teal-light,
 .hover\:bg-teal-light:hover {
   background-color: #64d5ca;
 }
 
-.bg-teal-lighter,
 .hover\:bg-teal-lighter:hover {
   background-color: #a0f0ed;
 }
 
-.bg-teal-lightest,
 .hover\:bg-teal-lightest:hover {
   background-color: #e8fffe;
 }
 
-.bg-blue-darkest,
 .hover\:bg-blue-darkest:hover {
   background-color: #05233b;
 }
 
-.bg-blue-darker,
 .hover\:bg-blue-darker:hover {
   background-color: #103d60;
 }
 
-.bg-blue-dark,
 .hover\:bg-blue-dark:hover {
   background-color: #2779bd;
 }
 
-.bg-blue,
 .hover\:bg-blue:hover {
   background-color: #3490dc;
 }
 
-.bg-blue-light,
 .hover\:bg-blue-light:hover {
   background-color: #6cb2eb;
 }
 
-.bg-blue-lighter,
 .hover\:bg-blue-lighter:hover {
   background-color: #bcdefa;
 }
 
-.bg-blue-lightest,
 .hover\:bg-blue-lightest:hover {
   background-color: #eff8ff;
 }
 
-.bg-indigo-darkest,
 .hover\:bg-indigo-darkest:hover {
   background-color: #191e38;
 }
 
-.bg-indigo-darker,
 .hover\:bg-indigo-darker:hover {
   background-color: #2f365f;
 }
 
-.bg-indigo-dark,
 .hover\:bg-indigo-dark:hover {
   background-color: #5661b3;
 }
 
-.bg-indigo,
 .hover\:bg-indigo:hover {
   background-color: #6574cd;
 }
 
-.bg-indigo-light,
 .hover\:bg-indigo-light:hover {
   background-color: #7886d7;
 }
 
-.bg-indigo-lighter,
 .hover\:bg-indigo-lighter:hover {
   background-color: #b2b7ff;
 }
 
-.bg-indigo-lightest,
 .hover\:bg-indigo-lightest:hover {
   background-color: #e6e8ff;
 }
 
-.bg-purple-darkest,
 .hover\:bg-purple-darkest:hover {
   background-color: #1f133f;
 }
 
-.bg-purple-darker,
 .hover\:bg-purple-darker:hover {
   background-color: #352465;
 }
 
-.bg-purple-dark,
 .hover\:bg-purple-dark:hover {
   background-color: #794acf;
 }
 
-.bg-purple,
 .hover\:bg-purple:hover {
   background-color: #9561e2;
 }
 
-.bg-purple-light,
 .hover\:bg-purple-light:hover {
   background-color: #a779e9;
 }
 
-.bg-purple-lighter,
 .hover\:bg-purple-lighter:hover {
   background-color: #d6bbfc;
 }
 
-.bg-purple-lightest,
 .hover\:bg-purple-lightest:hover {
   background-color: #f3ebff;
 }
 
-.bg-pink-darkest,
 .hover\:bg-pink-darkest:hover {
   background-color: #45051e;
 }
 
-.bg-pink-darker,
 .hover\:bg-pink-darker:hover {
   background-color: #72173a;
 }
 
-.bg-pink-dark,
 .hover\:bg-pink-dark:hover {
   background-color: #eb5286;
 }
 
-.bg-pink,
 .hover\:bg-pink:hover {
   background-color: #f66d9b;
 }
 
-.bg-pink-light,
 .hover\:bg-pink-light:hover {
   background-color: #fa7ea8;
 }
 
-.bg-pink-lighter,
 .hover\:bg-pink-lighter:hover {
   background-color: #ffbbca;
 }
 
-.bg-pink-lightest,
 .hover\:bg-pink-lightest:hover {
   background-color: #ffebef;
 }
@@ -1737,367 +2237,586 @@ button,
   border-left-width: 1px;
 }
 
-.border-transparent,
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-black {
+  border-color: #222b2f;
+}
+
+.border-grey-darkest {
+  border-color: #364349;
+}
+
+.border-grey-darker {
+  border-color: #596a73;
+}
+
+.border-grey-dark {
+  border-color: #70818a;
+}
+
+.border-grey {
+  border-color: #9babb4;
+}
+
+.border-grey-light {
+  border-color: #dae4e9;
+}
+
+.border-grey-lighter {
+  border-color: #f3f7f9;
+}
+
+.border-grey-lightest {
+  border-color: #fafcfc;
+}
+
+.border-white {
+  border-color: #ffffff;
+}
+
+.border-red-darkest {
+  border-color: #420806;
+}
+
+.border-red-darker {
+  border-color: #6a1b19;
+}
+
+.border-red-dark {
+  border-color: #cc1f1a;
+}
+
+.border-red {
+  border-color: #e3342f;
+}
+
+.border-red-light {
+  border-color: #ef5753;
+}
+
+.border-red-lighter {
+  border-color: #f9acaa;
+}
+
+.border-red-lightest {
+  border-color: #fcebea;
+}
+
+.border-orange-darkest {
+  border-color: #542605;
+}
+
+.border-orange-darker {
+  border-color: #7f4012;
+}
+
+.border-orange-dark {
+  border-color: #de751f;
+}
+
+.border-orange {
+  border-color: #f6993f;
+}
+
+.border-orange-light {
+  border-color: #faad63;
+}
+
+.border-orange-lighter {
+  border-color: #fcd9b6;
+}
+
+.border-orange-lightest {
+  border-color: #fff5eb;
+}
+
+.border-yellow-darkest {
+  border-color: #453411;
+}
+
+.border-yellow-darker {
+  border-color: #684f1d;
+}
+
+.border-yellow-dark {
+  border-color: #f2d024;
+}
+
+.border-yellow {
+  border-color: #ffed4a;
+}
+
+.border-yellow-light {
+  border-color: #fff382;
+}
+
+.border-yellow-lighter {
+  border-color: #fff9c2;
+}
+
+.border-yellow-lightest {
+  border-color: #fcfbeb;
+}
+
+.border-green-darkest {
+  border-color: #032d19;
+}
+
+.border-green-darker {
+  border-color: #0b4228;
+}
+
+.border-green-dark {
+  border-color: #1f9d55;
+}
+
+.border-green {
+  border-color: #38c172;
+}
+
+.border-green-light {
+  border-color: #51d88a;
+}
+
+.border-green-lighter {
+  border-color: #a2f5bf;
+}
+
+.border-green-lightest {
+  border-color: #e3fcec;
+}
+
+.border-teal-darkest {
+  border-color: #0d3331;
+}
+
+.border-teal-darker {
+  border-color: #174e4b;
+}
+
+.border-teal-dark {
+  border-color: #38a89d;
+}
+
+.border-teal {
+  border-color: #4dc0b5;
+}
+
+.border-teal-light {
+  border-color: #64d5ca;
+}
+
+.border-teal-lighter {
+  border-color: #a0f0ed;
+}
+
+.border-teal-lightest {
+  border-color: #e8fffe;
+}
+
+.border-blue-darkest {
+  border-color: #05233b;
+}
+
+.border-blue-darker {
+  border-color: #103d60;
+}
+
+.border-blue-dark {
+  border-color: #2779bd;
+}
+
+.border-blue {
+  border-color: #3490dc;
+}
+
+.border-blue-light {
+  border-color: #6cb2eb;
+}
+
+.border-blue-lighter {
+  border-color: #bcdefa;
+}
+
+.border-blue-lightest {
+  border-color: #eff8ff;
+}
+
+.border-indigo-darkest {
+  border-color: #191e38;
+}
+
+.border-indigo-darker {
+  border-color: #2f365f;
+}
+
+.border-indigo-dark {
+  border-color: #5661b3;
+}
+
+.border-indigo {
+  border-color: #6574cd;
+}
+
+.border-indigo-light {
+  border-color: #7886d7;
+}
+
+.border-indigo-lighter {
+  border-color: #b2b7ff;
+}
+
+.border-indigo-lightest {
+  border-color: #e6e8ff;
+}
+
+.border-purple-darkest {
+  border-color: #1f133f;
+}
+
+.border-purple-darker {
+  border-color: #352465;
+}
+
+.border-purple-dark {
+  border-color: #794acf;
+}
+
+.border-purple {
+  border-color: #9561e2;
+}
+
+.border-purple-light {
+  border-color: #a779e9;
+}
+
+.border-purple-lighter {
+  border-color: #d6bbfc;
+}
+
+.border-purple-lightest {
+  border-color: #f3ebff;
+}
+
+.border-pink-darkest {
+  border-color: #45051e;
+}
+
+.border-pink-darker {
+  border-color: #72173a;
+}
+
+.border-pink-dark {
+  border-color: #eb5286;
+}
+
+.border-pink {
+  border-color: #f66d9b;
+}
+
+.border-pink-light {
+  border-color: #fa7ea8;
+}
+
+.border-pink-lighter {
+  border-color: #ffbbca;
+}
+
+.border-pink-lightest {
+  border-color: #ffebef;
+}
+
 .hover\:border-transparent:hover {
   border-color: transparent;
 }
 
-.border-black,
 .hover\:border-black:hover {
   border-color: #222b2f;
 }
 
-.border-grey-darkest,
 .hover\:border-grey-darkest:hover {
   border-color: #364349;
 }
 
-.border-grey-darker,
 .hover\:border-grey-darker:hover {
   border-color: #596a73;
 }
 
-.border-grey-dark,
 .hover\:border-grey-dark:hover {
   border-color: #70818a;
 }
 
-.border-grey,
 .hover\:border-grey:hover {
   border-color: #9babb4;
 }
 
-.border-grey-light,
 .hover\:border-grey-light:hover {
   border-color: #dae4e9;
 }
 
-.border-grey-lighter,
 .hover\:border-grey-lighter:hover {
   border-color: #f3f7f9;
 }
 
-.border-grey-lightest,
 .hover\:border-grey-lightest:hover {
   border-color: #fafcfc;
 }
 
-.border-white,
 .hover\:border-white:hover {
   border-color: #ffffff;
 }
 
-.border-red-darkest,
 .hover\:border-red-darkest:hover {
   border-color: #420806;
 }
 
-.border-red-darker,
 .hover\:border-red-darker:hover {
   border-color: #6a1b19;
 }
 
-.border-red-dark,
 .hover\:border-red-dark:hover {
   border-color: #cc1f1a;
 }
 
-.border-red,
 .hover\:border-red:hover {
   border-color: #e3342f;
 }
 
-.border-red-light,
 .hover\:border-red-light:hover {
   border-color: #ef5753;
 }
 
-.border-red-lighter,
 .hover\:border-red-lighter:hover {
   border-color: #f9acaa;
 }
 
-.border-red-lightest,
 .hover\:border-red-lightest:hover {
   border-color: #fcebea;
 }
 
-.border-orange-darkest,
 .hover\:border-orange-darkest:hover {
   border-color: #542605;
 }
 
-.border-orange-darker,
 .hover\:border-orange-darker:hover {
   border-color: #7f4012;
 }
 
-.border-orange-dark,
 .hover\:border-orange-dark:hover {
   border-color: #de751f;
 }
 
-.border-orange,
 .hover\:border-orange:hover {
   border-color: #f6993f;
 }
 
-.border-orange-light,
 .hover\:border-orange-light:hover {
   border-color: #faad63;
 }
 
-.border-orange-lighter,
 .hover\:border-orange-lighter:hover {
   border-color: #fcd9b6;
 }
 
-.border-orange-lightest,
 .hover\:border-orange-lightest:hover {
   border-color: #fff5eb;
 }
 
-.border-yellow-darkest,
 .hover\:border-yellow-darkest:hover {
   border-color: #453411;
 }
 
-.border-yellow-darker,
 .hover\:border-yellow-darker:hover {
   border-color: #684f1d;
 }
 
-.border-yellow-dark,
 .hover\:border-yellow-dark:hover {
   border-color: #f2d024;
 }
 
-.border-yellow,
 .hover\:border-yellow:hover {
   border-color: #ffed4a;
 }
 
-.border-yellow-light,
 .hover\:border-yellow-light:hover {
   border-color: #fff382;
 }
 
-.border-yellow-lighter,
 .hover\:border-yellow-lighter:hover {
   border-color: #fff9c2;
 }
 
-.border-yellow-lightest,
 .hover\:border-yellow-lightest:hover {
   border-color: #fcfbeb;
 }
 
-.border-green-darkest,
 .hover\:border-green-darkest:hover {
   border-color: #032d19;
 }
 
-.border-green-darker,
 .hover\:border-green-darker:hover {
   border-color: #0b4228;
 }
 
-.border-green-dark,
 .hover\:border-green-dark:hover {
   border-color: #1f9d55;
 }
 
-.border-green,
 .hover\:border-green:hover {
   border-color: #38c172;
 }
 
-.border-green-light,
 .hover\:border-green-light:hover {
   border-color: #51d88a;
 }
 
-.border-green-lighter,
 .hover\:border-green-lighter:hover {
   border-color: #a2f5bf;
 }
 
-.border-green-lightest,
 .hover\:border-green-lightest:hover {
   border-color: #e3fcec;
 }
 
-.border-teal-darkest,
 .hover\:border-teal-darkest:hover {
   border-color: #0d3331;
 }
 
-.border-teal-darker,
 .hover\:border-teal-darker:hover {
   border-color: #174e4b;
 }
 
-.border-teal-dark,
 .hover\:border-teal-dark:hover {
   border-color: #38a89d;
 }
 
-.border-teal,
 .hover\:border-teal:hover {
   border-color: #4dc0b5;
 }
 
-.border-teal-light,
 .hover\:border-teal-light:hover {
   border-color: #64d5ca;
 }
 
-.border-teal-lighter,
 .hover\:border-teal-lighter:hover {
   border-color: #a0f0ed;
 }
 
-.border-teal-lightest,
 .hover\:border-teal-lightest:hover {
   border-color: #e8fffe;
 }
 
-.border-blue-darkest,
 .hover\:border-blue-darkest:hover {
   border-color: #05233b;
 }
 
-.border-blue-darker,
 .hover\:border-blue-darker:hover {
   border-color: #103d60;
 }
 
-.border-blue-dark,
 .hover\:border-blue-dark:hover {
   border-color: #2779bd;
 }
 
-.border-blue,
 .hover\:border-blue:hover {
   border-color: #3490dc;
 }
 
-.border-blue-light,
 .hover\:border-blue-light:hover {
   border-color: #6cb2eb;
 }
 
-.border-blue-lighter,
 .hover\:border-blue-lighter:hover {
   border-color: #bcdefa;
 }
 
-.border-blue-lightest,
 .hover\:border-blue-lightest:hover {
   border-color: #eff8ff;
 }
 
-.border-indigo-darkest,
 .hover\:border-indigo-darkest:hover {
   border-color: #191e38;
 }
 
-.border-indigo-darker,
 .hover\:border-indigo-darker:hover {
   border-color: #2f365f;
 }
 
-.border-indigo-dark,
 .hover\:border-indigo-dark:hover {
   border-color: #5661b3;
 }
 
-.border-indigo,
 .hover\:border-indigo:hover {
   border-color: #6574cd;
 }
 
-.border-indigo-light,
 .hover\:border-indigo-light:hover {
   border-color: #7886d7;
 }
 
-.border-indigo-lighter,
 .hover\:border-indigo-lighter:hover {
   border-color: #b2b7ff;
 }
 
-.border-indigo-lightest,
 .hover\:border-indigo-lightest:hover {
   border-color: #e6e8ff;
 }
 
-.border-purple-darkest,
 .hover\:border-purple-darkest:hover {
   border-color: #1f133f;
 }
 
-.border-purple-darker,
 .hover\:border-purple-darker:hover {
   border-color: #352465;
 }
 
-.border-purple-dark,
 .hover\:border-purple-dark:hover {
   border-color: #794acf;
 }
 
-.border-purple,
 .hover\:border-purple:hover {
   border-color: #9561e2;
 }
 
-.border-purple-light,
 .hover\:border-purple-light:hover {
   border-color: #a779e9;
 }
 
-.border-purple-lighter,
 .hover\:border-purple-lighter:hover {
   border-color: #d6bbfc;
 }
 
-.border-purple-lightest,
 .hover\:border-purple-lightest:hover {
   border-color: #f3ebff;
 }
 
-.border-pink-darkest,
 .hover\:border-pink-darkest:hover {
   border-color: #45051e;
 }
 
-.border-pink-darker,
 .hover\:border-pink-darker:hover {
   border-color: #72173a;
 }
 
-.border-pink-dark,
 .hover\:border-pink-dark:hover {
   border-color: #eb5286;
 }
 
-.border-pink,
 .hover\:border-pink:hover {
   border-color: #f66d9b;
 }
 
-.border-pink-light,
 .hover\:border-pink-light:hover {
   border-color: #fa7ea8;
 }
 
-.border-pink-lighter,
 .hover\:border-pink-lighter:hover {
   border-color: #ffbbca;
 }
 
-.border-pink-lightest,
 .hover\:border-pink-lightest:hover {
   border-color: #ffebef;
 }
@@ -3767,47 +4486,74 @@ button,
     font-size: 3rem;
   }
 
-  .sm\:font-hairline,
+  .sm\:font-hairline {
+    font-weight: 100;
+  }
+
+  .sm\:font-thin {
+    font-weight: 200;
+  }
+
+  .sm\:font-light {
+    font-weight: 300;
+  }
+
+  .sm\:font-normal {
+    font-weight: 400;
+  }
+
+  .sm\:font-medium {
+    font-weight: 500;
+  }
+
+  .sm\:font-semibold {
+    font-weight: 600;
+  }
+
+  .sm\:font-bold {
+    font-weight: 700;
+  }
+
+  .sm\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .sm\:font-black {
+    font-weight: 900;
+  }
+
   .sm\:hover\:font-hairline:hover {
     font-weight: 100;
   }
 
-  .sm\:font-thin,
   .sm\:hover\:font-thin:hover {
     font-weight: 200;
   }
 
-  .sm\:font-light,
   .sm\:hover\:font-light:hover {
     font-weight: 300;
   }
 
-  .sm\:font-normal,
   .sm\:hover\:font-normal:hover {
     font-weight: 400;
   }
 
-  .sm\:font-medium,
   .sm\:hover\:font-medium:hover {
     font-weight: 500;
   }
 
-  .sm\:font-semibold,
   .sm\:hover\:font-semibold:hover {
     font-weight: 600;
   }
 
-  .sm\:font-bold,
   .sm\:hover\:font-bold:hover {
     font-weight: 700;
   }
 
-  .sm\:font-extrabold,
   .sm\:hover\:font-extrabold:hover {
     font-weight: 800;
   }
 
-  .sm\:font-black,
   .sm\:hover\:font-black:hover {
     font-weight: 900;
   }
@@ -3824,367 +4570,586 @@ button,
     font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   }
 
-  .sm\:text-transparent,
+  .sm\:text-transparent {
+    color: transparent;
+  }
+
+  .sm\:text-black {
+    color: #222b2f;
+  }
+
+  .sm\:text-grey-darkest {
+    color: #364349;
+  }
+
+  .sm\:text-grey-darker {
+    color: #596a73;
+  }
+
+  .sm\:text-grey-dark {
+    color: #70818a;
+  }
+
+  .sm\:text-grey {
+    color: #9babb4;
+  }
+
+  .sm\:text-grey-light {
+    color: #dae4e9;
+  }
+
+  .sm\:text-grey-lighter {
+    color: #f3f7f9;
+  }
+
+  .sm\:text-grey-lightest {
+    color: #fafcfc;
+  }
+
+  .sm\:text-white {
+    color: #ffffff;
+  }
+
+  .sm\:text-red-darkest {
+    color: #420806;
+  }
+
+  .sm\:text-red-darker {
+    color: #6a1b19;
+  }
+
+  .sm\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .sm\:text-red {
+    color: #e3342f;
+  }
+
+  .sm\:text-red-light {
+    color: #ef5753;
+  }
+
+  .sm\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .sm\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .sm\:text-orange-darkest {
+    color: #542605;
+  }
+
+  .sm\:text-orange-darker {
+    color: #7f4012;
+  }
+
+  .sm\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .sm\:text-orange {
+    color: #f6993f;
+  }
+
+  .sm\:text-orange-light {
+    color: #faad63;
+  }
+
+  .sm\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .sm\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .sm\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .sm\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .sm\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .sm\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .sm\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .sm\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .sm\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .sm\:text-green-darkest {
+    color: #032d19;
+  }
+
+  .sm\:text-green-darker {
+    color: #0b4228;
+  }
+
+  .sm\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .sm\:text-green {
+    color: #38c172;
+  }
+
+  .sm\:text-green-light {
+    color: #51d88a;
+  }
+
+  .sm\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .sm\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .sm\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .sm\:text-teal-darker {
+    color: #174e4b;
+  }
+
+  .sm\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .sm\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .sm\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .sm\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .sm\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .sm\:text-blue-darkest {
+    color: #05233b;
+  }
+
+  .sm\:text-blue-darker {
+    color: #103d60;
+  }
+
+  .sm\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .sm\:text-blue {
+    color: #3490dc;
+  }
+
+  .sm\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .sm\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .sm\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .sm\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .sm\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .sm\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .sm\:text-indigo {
+    color: #6574cd;
+  }
+
+  .sm\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .sm\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .sm\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .sm\:text-purple-darkest {
+    color: #1f133f;
+  }
+
+  .sm\:text-purple-darker {
+    color: #352465;
+  }
+
+  .sm\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .sm\:text-purple {
+    color: #9561e2;
+  }
+
+  .sm\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .sm\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .sm\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .sm\:text-pink-darkest {
+    color: #45051e;
+  }
+
+  .sm\:text-pink-darker {
+    color: #72173a;
+  }
+
+  .sm\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .sm\:text-pink {
+    color: #f66d9b;
+  }
+
+  .sm\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .sm\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .sm\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .sm\:hover\:text-transparent:hover {
     color: transparent;
   }
 
-  .sm\:text-black,
   .sm\:hover\:text-black:hover {
     color: #222b2f;
   }
 
-  .sm\:text-grey-darkest,
   .sm\:hover\:text-grey-darkest:hover {
     color: #364349;
   }
 
-  .sm\:text-grey-darker,
   .sm\:hover\:text-grey-darker:hover {
     color: #596a73;
   }
 
-  .sm\:text-grey-dark,
   .sm\:hover\:text-grey-dark:hover {
     color: #70818a;
   }
 
-  .sm\:text-grey,
   .sm\:hover\:text-grey:hover {
     color: #9babb4;
   }
 
-  .sm\:text-grey-light,
   .sm\:hover\:text-grey-light:hover {
     color: #dae4e9;
   }
 
-  .sm\:text-grey-lighter,
   .sm\:hover\:text-grey-lighter:hover {
     color: #f3f7f9;
   }
 
-  .sm\:text-grey-lightest,
   .sm\:hover\:text-grey-lightest:hover {
     color: #fafcfc;
   }
 
-  .sm\:text-white,
   .sm\:hover\:text-white:hover {
     color: #ffffff;
   }
 
-  .sm\:text-red-darkest,
   .sm\:hover\:text-red-darkest:hover {
     color: #420806;
   }
 
-  .sm\:text-red-darker,
   .sm\:hover\:text-red-darker:hover {
     color: #6a1b19;
   }
 
-  .sm\:text-red-dark,
   .sm\:hover\:text-red-dark:hover {
     color: #cc1f1a;
   }
 
-  .sm\:text-red,
   .sm\:hover\:text-red:hover {
     color: #e3342f;
   }
 
-  .sm\:text-red-light,
   .sm\:hover\:text-red-light:hover {
     color: #ef5753;
   }
 
-  .sm\:text-red-lighter,
   .sm\:hover\:text-red-lighter:hover {
     color: #f9acaa;
   }
 
-  .sm\:text-red-lightest,
   .sm\:hover\:text-red-lightest:hover {
     color: #fcebea;
   }
 
-  .sm\:text-orange-darkest,
   .sm\:hover\:text-orange-darkest:hover {
     color: #542605;
   }
 
-  .sm\:text-orange-darker,
   .sm\:hover\:text-orange-darker:hover {
     color: #7f4012;
   }
 
-  .sm\:text-orange-dark,
   .sm\:hover\:text-orange-dark:hover {
     color: #de751f;
   }
 
-  .sm\:text-orange,
   .sm\:hover\:text-orange:hover {
     color: #f6993f;
   }
 
-  .sm\:text-orange-light,
   .sm\:hover\:text-orange-light:hover {
     color: #faad63;
   }
 
-  .sm\:text-orange-lighter,
   .sm\:hover\:text-orange-lighter:hover {
     color: #fcd9b6;
   }
 
-  .sm\:text-orange-lightest,
   .sm\:hover\:text-orange-lightest:hover {
     color: #fff5eb;
   }
 
-  .sm\:text-yellow-darkest,
   .sm\:hover\:text-yellow-darkest:hover {
     color: #453411;
   }
 
-  .sm\:text-yellow-darker,
   .sm\:hover\:text-yellow-darker:hover {
     color: #684f1d;
   }
 
-  .sm\:text-yellow-dark,
   .sm\:hover\:text-yellow-dark:hover {
     color: #f2d024;
   }
 
-  .sm\:text-yellow,
   .sm\:hover\:text-yellow:hover {
     color: #ffed4a;
   }
 
-  .sm\:text-yellow-light,
   .sm\:hover\:text-yellow-light:hover {
     color: #fff382;
   }
 
-  .sm\:text-yellow-lighter,
   .sm\:hover\:text-yellow-lighter:hover {
     color: #fff9c2;
   }
 
-  .sm\:text-yellow-lightest,
   .sm\:hover\:text-yellow-lightest:hover {
     color: #fcfbeb;
   }
 
-  .sm\:text-green-darkest,
   .sm\:hover\:text-green-darkest:hover {
     color: #032d19;
   }
 
-  .sm\:text-green-darker,
   .sm\:hover\:text-green-darker:hover {
     color: #0b4228;
   }
 
-  .sm\:text-green-dark,
   .sm\:hover\:text-green-dark:hover {
     color: #1f9d55;
   }
 
-  .sm\:text-green,
   .sm\:hover\:text-green:hover {
     color: #38c172;
   }
 
-  .sm\:text-green-light,
   .sm\:hover\:text-green-light:hover {
     color: #51d88a;
   }
 
-  .sm\:text-green-lighter,
   .sm\:hover\:text-green-lighter:hover {
     color: #a2f5bf;
   }
 
-  .sm\:text-green-lightest,
   .sm\:hover\:text-green-lightest:hover {
     color: #e3fcec;
   }
 
-  .sm\:text-teal-darkest,
   .sm\:hover\:text-teal-darkest:hover {
     color: #0d3331;
   }
 
-  .sm\:text-teal-darker,
   .sm\:hover\:text-teal-darker:hover {
     color: #174e4b;
   }
 
-  .sm\:text-teal-dark,
   .sm\:hover\:text-teal-dark:hover {
     color: #38a89d;
   }
 
-  .sm\:text-teal,
   .sm\:hover\:text-teal:hover {
     color: #4dc0b5;
   }
 
-  .sm\:text-teal-light,
   .sm\:hover\:text-teal-light:hover {
     color: #64d5ca;
   }
 
-  .sm\:text-teal-lighter,
   .sm\:hover\:text-teal-lighter:hover {
     color: #a0f0ed;
   }
 
-  .sm\:text-teal-lightest,
   .sm\:hover\:text-teal-lightest:hover {
     color: #e8fffe;
   }
 
-  .sm\:text-blue-darkest,
   .sm\:hover\:text-blue-darkest:hover {
     color: #05233b;
   }
 
-  .sm\:text-blue-darker,
   .sm\:hover\:text-blue-darker:hover {
     color: #103d60;
   }
 
-  .sm\:text-blue-dark,
   .sm\:hover\:text-blue-dark:hover {
     color: #2779bd;
   }
 
-  .sm\:text-blue,
   .sm\:hover\:text-blue:hover {
     color: #3490dc;
   }
 
-  .sm\:text-blue-light,
   .sm\:hover\:text-blue-light:hover {
     color: #6cb2eb;
   }
 
-  .sm\:text-blue-lighter,
   .sm\:hover\:text-blue-lighter:hover {
     color: #bcdefa;
   }
 
-  .sm\:text-blue-lightest,
   .sm\:hover\:text-blue-lightest:hover {
     color: #eff8ff;
   }
 
-  .sm\:text-indigo-darkest,
   .sm\:hover\:text-indigo-darkest:hover {
     color: #191e38;
   }
 
-  .sm\:text-indigo-darker,
   .sm\:hover\:text-indigo-darker:hover {
     color: #2f365f;
   }
 
-  .sm\:text-indigo-dark,
   .sm\:hover\:text-indigo-dark:hover {
     color: #5661b3;
   }
 
-  .sm\:text-indigo,
   .sm\:hover\:text-indigo:hover {
     color: #6574cd;
   }
 
-  .sm\:text-indigo-light,
   .sm\:hover\:text-indigo-light:hover {
     color: #7886d7;
   }
 
-  .sm\:text-indigo-lighter,
   .sm\:hover\:text-indigo-lighter:hover {
     color: #b2b7ff;
   }
 
-  .sm\:text-indigo-lightest,
   .sm\:hover\:text-indigo-lightest:hover {
     color: #e6e8ff;
   }
 
-  .sm\:text-purple-darkest,
   .sm\:hover\:text-purple-darkest:hover {
     color: #1f133f;
   }
 
-  .sm\:text-purple-darker,
   .sm\:hover\:text-purple-darker:hover {
     color: #352465;
   }
 
-  .sm\:text-purple-dark,
   .sm\:hover\:text-purple-dark:hover {
     color: #794acf;
   }
 
-  .sm\:text-purple,
   .sm\:hover\:text-purple:hover {
     color: #9561e2;
   }
 
-  .sm\:text-purple-light,
   .sm\:hover\:text-purple-light:hover {
     color: #a779e9;
   }
 
-  .sm\:text-purple-lighter,
   .sm\:hover\:text-purple-lighter:hover {
     color: #d6bbfc;
   }
 
-  .sm\:text-purple-lightest,
   .sm\:hover\:text-purple-lightest:hover {
     color: #f3ebff;
   }
 
-  .sm\:text-pink-darkest,
   .sm\:hover\:text-pink-darkest:hover {
     color: #45051e;
   }
 
-  .sm\:text-pink-darker,
   .sm\:hover\:text-pink-darker:hover {
     color: #72173a;
   }
 
-  .sm\:text-pink-dark,
   .sm\:hover\:text-pink-dark:hover {
     color: #eb5286;
   }
 
-  .sm\:text-pink,
   .sm\:hover\:text-pink:hover {
     color: #f66d9b;
   }
 
-  .sm\:text-pink-light,
   .sm\:hover\:text-pink-light:hover {
     color: #fa7ea8;
   }
 
-  .sm\:text-pink-lighter,
   .sm\:hover\:text-pink-lighter:hover {
     color: #ffbbca;
   }
 
-  .sm\:text-pink-lightest,
   .sm\:hover\:text-pink-lightest:hover {
     color: #ffebef;
   }
@@ -4267,58 +5232,93 @@ button,
     white-space: nowrap;
   }
 
-  .sm\:italic,
+  .sm\:italic {
+    font-style: italic;
+  }
+
+  .sm\:roman {
+    font-style: normal;
+  }
+
+  .sm\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .sm\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .sm\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .sm\:normal-case {
+    text-transform: none;
+  }
+
+  .sm\:underline {
+    text-decoration: underline;
+  }
+
+  .sm\:line-through {
+    text-decoration: line-through;
+  }
+
+  .sm\:no-underline {
+    text-decoration: none;
+  }
+
+  .sm\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .sm\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
   .sm\:hover\:italic:hover {
     font-style: italic;
   }
 
-  .sm\:roman,
   .sm\:hover\:roman:hover {
     font-style: normal;
   }
 
-  .sm\:uppercase,
   .sm\:hover\:uppercase:hover {
     text-transform: uppercase;
   }
 
-  .sm\:lowercase,
   .sm\:hover\:lowercase:hover {
     text-transform: lowercase;
   }
 
-  .sm\:capitalize,
   .sm\:hover\:capitalize:hover {
     text-transform: capitalize;
   }
 
-  .sm\:normal-case,
   .sm\:hover\:normal-case:hover {
     text-transform: none;
   }
 
-  .sm\:underline,
   .sm\:hover\:underline:hover {
     text-decoration: underline;
   }
 
-  .sm\:line-through,
   .sm\:hover\:line-through:hover {
     text-decoration: line-through;
   }
 
-  .sm\:no-underline,
   .sm\:hover\:no-underline:hover {
     text-decoration: none;
   }
 
-  .sm\:antialiased,
   .sm\:hover\:antialiased:hover {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .sm\:subpixel-antialiased,
   .sm\:hover\:subpixel-antialiased:hover {
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
@@ -4348,367 +5348,586 @@ button,
     vertical-align: text-bottom;
   }
 
-  .sm\:bg-transparent,
+  .sm\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .sm\:bg-black {
+    background-color: #222b2f;
+  }
+
+  .sm\:bg-grey-darkest {
+    background-color: #364349;
+  }
+
+  .sm\:bg-grey-darker {
+    background-color: #596a73;
+  }
+
+  .sm\:bg-grey-dark {
+    background-color: #70818a;
+  }
+
+  .sm\:bg-grey {
+    background-color: #9babb4;
+  }
+
+  .sm\:bg-grey-light {
+    background-color: #dae4e9;
+  }
+
+  .sm\:bg-grey-lighter {
+    background-color: #f3f7f9;
+  }
+
+  .sm\:bg-grey-lightest {
+    background-color: #fafcfc;
+  }
+
+  .sm\:bg-white {
+    background-color: #ffffff;
+  }
+
+  .sm\:bg-red-darkest {
+    background-color: #420806;
+  }
+
+  .sm\:bg-red-darker {
+    background-color: #6a1b19;
+  }
+
+  .sm\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .sm\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .sm\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .sm\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .sm\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .sm\:bg-orange-darkest {
+    background-color: #542605;
+  }
+
+  .sm\:bg-orange-darker {
+    background-color: #7f4012;
+  }
+
+  .sm\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .sm\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .sm\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .sm\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .sm\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .sm\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .sm\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .sm\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .sm\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .sm\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .sm\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .sm\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .sm\:bg-green-darkest {
+    background-color: #032d19;
+  }
+
+  .sm\:bg-green-darker {
+    background-color: #0b4228;
+  }
+
+  .sm\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .sm\:bg-green {
+    background-color: #38c172;
+  }
+
+  .sm\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .sm\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .sm\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .sm\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .sm\:bg-teal-darker {
+    background-color: #174e4b;
+  }
+
+  .sm\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .sm\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .sm\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .sm\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .sm\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .sm\:bg-blue-darkest {
+    background-color: #05233b;
+  }
+
+  .sm\:bg-blue-darker {
+    background-color: #103d60;
+  }
+
+  .sm\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .sm\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .sm\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .sm\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .sm\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .sm\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .sm\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .sm\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .sm\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .sm\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .sm\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .sm\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .sm\:bg-purple-darkest {
+    background-color: #1f133f;
+  }
+
+  .sm\:bg-purple-darker {
+    background-color: #352465;
+  }
+
+  .sm\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .sm\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .sm\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .sm\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .sm\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .sm\:bg-pink-darkest {
+    background-color: #45051e;
+  }
+
+  .sm\:bg-pink-darker {
+    background-color: #72173a;
+  }
+
+  .sm\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .sm\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .sm\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .sm\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .sm\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .sm\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
 
-  .sm\:bg-black,
   .sm\:hover\:bg-black:hover {
     background-color: #222b2f;
   }
 
-  .sm\:bg-grey-darkest,
   .sm\:hover\:bg-grey-darkest:hover {
     background-color: #364349;
   }
 
-  .sm\:bg-grey-darker,
   .sm\:hover\:bg-grey-darker:hover {
     background-color: #596a73;
   }
 
-  .sm\:bg-grey-dark,
   .sm\:hover\:bg-grey-dark:hover {
     background-color: #70818a;
   }
 
-  .sm\:bg-grey,
   .sm\:hover\:bg-grey:hover {
     background-color: #9babb4;
   }
 
-  .sm\:bg-grey-light,
   .sm\:hover\:bg-grey-light:hover {
     background-color: #dae4e9;
   }
 
-  .sm\:bg-grey-lighter,
   .sm\:hover\:bg-grey-lighter:hover {
     background-color: #f3f7f9;
   }
 
-  .sm\:bg-grey-lightest,
   .sm\:hover\:bg-grey-lightest:hover {
     background-color: #fafcfc;
   }
 
-  .sm\:bg-white,
   .sm\:hover\:bg-white:hover {
     background-color: #ffffff;
   }
 
-  .sm\:bg-red-darkest,
   .sm\:hover\:bg-red-darkest:hover {
     background-color: #420806;
   }
 
-  .sm\:bg-red-darker,
   .sm\:hover\:bg-red-darker:hover {
     background-color: #6a1b19;
   }
 
-  .sm\:bg-red-dark,
   .sm\:hover\:bg-red-dark:hover {
     background-color: #cc1f1a;
   }
 
-  .sm\:bg-red,
   .sm\:hover\:bg-red:hover {
     background-color: #e3342f;
   }
 
-  .sm\:bg-red-light,
   .sm\:hover\:bg-red-light:hover {
     background-color: #ef5753;
   }
 
-  .sm\:bg-red-lighter,
   .sm\:hover\:bg-red-lighter:hover {
     background-color: #f9acaa;
   }
 
-  .sm\:bg-red-lightest,
   .sm\:hover\:bg-red-lightest:hover {
     background-color: #fcebea;
   }
 
-  .sm\:bg-orange-darkest,
   .sm\:hover\:bg-orange-darkest:hover {
     background-color: #542605;
   }
 
-  .sm\:bg-orange-darker,
   .sm\:hover\:bg-orange-darker:hover {
     background-color: #7f4012;
   }
 
-  .sm\:bg-orange-dark,
   .sm\:hover\:bg-orange-dark:hover {
     background-color: #de751f;
   }
 
-  .sm\:bg-orange,
   .sm\:hover\:bg-orange:hover {
     background-color: #f6993f;
   }
 
-  .sm\:bg-orange-light,
   .sm\:hover\:bg-orange-light:hover {
     background-color: #faad63;
   }
 
-  .sm\:bg-orange-lighter,
   .sm\:hover\:bg-orange-lighter:hover {
     background-color: #fcd9b6;
   }
 
-  .sm\:bg-orange-lightest,
   .sm\:hover\:bg-orange-lightest:hover {
     background-color: #fff5eb;
   }
 
-  .sm\:bg-yellow-darkest,
   .sm\:hover\:bg-yellow-darkest:hover {
     background-color: #453411;
   }
 
-  .sm\:bg-yellow-darker,
   .sm\:hover\:bg-yellow-darker:hover {
     background-color: #684f1d;
   }
 
-  .sm\:bg-yellow-dark,
   .sm\:hover\:bg-yellow-dark:hover {
     background-color: #f2d024;
   }
 
-  .sm\:bg-yellow,
   .sm\:hover\:bg-yellow:hover {
     background-color: #ffed4a;
   }
 
-  .sm\:bg-yellow-light,
   .sm\:hover\:bg-yellow-light:hover {
     background-color: #fff382;
   }
 
-  .sm\:bg-yellow-lighter,
   .sm\:hover\:bg-yellow-lighter:hover {
     background-color: #fff9c2;
   }
 
-  .sm\:bg-yellow-lightest,
   .sm\:hover\:bg-yellow-lightest:hover {
     background-color: #fcfbeb;
   }
 
-  .sm\:bg-green-darkest,
   .sm\:hover\:bg-green-darkest:hover {
     background-color: #032d19;
   }
 
-  .sm\:bg-green-darker,
   .sm\:hover\:bg-green-darker:hover {
     background-color: #0b4228;
   }
 
-  .sm\:bg-green-dark,
   .sm\:hover\:bg-green-dark:hover {
     background-color: #1f9d55;
   }
 
-  .sm\:bg-green,
   .sm\:hover\:bg-green:hover {
     background-color: #38c172;
   }
 
-  .sm\:bg-green-light,
   .sm\:hover\:bg-green-light:hover {
     background-color: #51d88a;
   }
 
-  .sm\:bg-green-lighter,
   .sm\:hover\:bg-green-lighter:hover {
     background-color: #a2f5bf;
   }
 
-  .sm\:bg-green-lightest,
   .sm\:hover\:bg-green-lightest:hover {
     background-color: #e3fcec;
   }
 
-  .sm\:bg-teal-darkest,
   .sm\:hover\:bg-teal-darkest:hover {
     background-color: #0d3331;
   }
 
-  .sm\:bg-teal-darker,
   .sm\:hover\:bg-teal-darker:hover {
     background-color: #174e4b;
   }
 
-  .sm\:bg-teal-dark,
   .sm\:hover\:bg-teal-dark:hover {
     background-color: #38a89d;
   }
 
-  .sm\:bg-teal,
   .sm\:hover\:bg-teal:hover {
     background-color: #4dc0b5;
   }
 
-  .sm\:bg-teal-light,
   .sm\:hover\:bg-teal-light:hover {
     background-color: #64d5ca;
   }
 
-  .sm\:bg-teal-lighter,
   .sm\:hover\:bg-teal-lighter:hover {
     background-color: #a0f0ed;
   }
 
-  .sm\:bg-teal-lightest,
   .sm\:hover\:bg-teal-lightest:hover {
     background-color: #e8fffe;
   }
 
-  .sm\:bg-blue-darkest,
   .sm\:hover\:bg-blue-darkest:hover {
     background-color: #05233b;
   }
 
-  .sm\:bg-blue-darker,
   .sm\:hover\:bg-blue-darker:hover {
     background-color: #103d60;
   }
 
-  .sm\:bg-blue-dark,
   .sm\:hover\:bg-blue-dark:hover {
     background-color: #2779bd;
   }
 
-  .sm\:bg-blue,
   .sm\:hover\:bg-blue:hover {
     background-color: #3490dc;
   }
 
-  .sm\:bg-blue-light,
   .sm\:hover\:bg-blue-light:hover {
     background-color: #6cb2eb;
   }
 
-  .sm\:bg-blue-lighter,
   .sm\:hover\:bg-blue-lighter:hover {
     background-color: #bcdefa;
   }
 
-  .sm\:bg-blue-lightest,
   .sm\:hover\:bg-blue-lightest:hover {
     background-color: #eff8ff;
   }
 
-  .sm\:bg-indigo-darkest,
   .sm\:hover\:bg-indigo-darkest:hover {
     background-color: #191e38;
   }
 
-  .sm\:bg-indigo-darker,
   .sm\:hover\:bg-indigo-darker:hover {
     background-color: #2f365f;
   }
 
-  .sm\:bg-indigo-dark,
   .sm\:hover\:bg-indigo-dark:hover {
     background-color: #5661b3;
   }
 
-  .sm\:bg-indigo,
   .sm\:hover\:bg-indigo:hover {
     background-color: #6574cd;
   }
 
-  .sm\:bg-indigo-light,
   .sm\:hover\:bg-indigo-light:hover {
     background-color: #7886d7;
   }
 
-  .sm\:bg-indigo-lighter,
   .sm\:hover\:bg-indigo-lighter:hover {
     background-color: #b2b7ff;
   }
 
-  .sm\:bg-indigo-lightest,
   .sm\:hover\:bg-indigo-lightest:hover {
     background-color: #e6e8ff;
   }
 
-  .sm\:bg-purple-darkest,
   .sm\:hover\:bg-purple-darkest:hover {
     background-color: #1f133f;
   }
 
-  .sm\:bg-purple-darker,
   .sm\:hover\:bg-purple-darker:hover {
     background-color: #352465;
   }
 
-  .sm\:bg-purple-dark,
   .sm\:hover\:bg-purple-dark:hover {
     background-color: #794acf;
   }
 
-  .sm\:bg-purple,
   .sm\:hover\:bg-purple:hover {
     background-color: #9561e2;
   }
 
-  .sm\:bg-purple-light,
   .sm\:hover\:bg-purple-light:hover {
     background-color: #a779e9;
   }
 
-  .sm\:bg-purple-lighter,
   .sm\:hover\:bg-purple-lighter:hover {
     background-color: #d6bbfc;
   }
 
-  .sm\:bg-purple-lightest,
   .sm\:hover\:bg-purple-lightest:hover {
     background-color: #f3ebff;
   }
 
-  .sm\:bg-pink-darkest,
   .sm\:hover\:bg-pink-darkest:hover {
     background-color: #45051e;
   }
 
-  .sm\:bg-pink-darker,
   .sm\:hover\:bg-pink-darker:hover {
     background-color: #72173a;
   }
 
-  .sm\:bg-pink-dark,
   .sm\:hover\:bg-pink-dark:hover {
     background-color: #eb5286;
   }
 
-  .sm\:bg-pink,
   .sm\:hover\:bg-pink:hover {
     background-color: #f66d9b;
   }
 
-  .sm\:bg-pink-light,
   .sm\:hover\:bg-pink-light:hover {
     background-color: #fa7ea8;
   }
 
-  .sm\:bg-pink-lighter,
   .sm\:hover\:bg-pink-lighter:hover {
     background-color: #ffbbca;
   }
 
-  .sm\:bg-pink-lightest,
   .sm\:hover\:bg-pink-lightest:hover {
     background-color: #ffebef;
   }
@@ -4857,367 +6076,586 @@ button,
     border-left-width: 1px;
   }
 
-  .sm\:border-transparent,
+  .sm\:border-transparent {
+    border-color: transparent;
+  }
+
+  .sm\:border-black {
+    border-color: #222b2f;
+  }
+
+  .sm\:border-grey-darkest {
+    border-color: #364349;
+  }
+
+  .sm\:border-grey-darker {
+    border-color: #596a73;
+  }
+
+  .sm\:border-grey-dark {
+    border-color: #70818a;
+  }
+
+  .sm\:border-grey {
+    border-color: #9babb4;
+  }
+
+  .sm\:border-grey-light {
+    border-color: #dae4e9;
+  }
+
+  .sm\:border-grey-lighter {
+    border-color: #f3f7f9;
+  }
+
+  .sm\:border-grey-lightest {
+    border-color: #fafcfc;
+  }
+
+  .sm\:border-white {
+    border-color: #ffffff;
+  }
+
+  .sm\:border-red-darkest {
+    border-color: #420806;
+  }
+
+  .sm\:border-red-darker {
+    border-color: #6a1b19;
+  }
+
+  .sm\:border-red-dark {
+    border-color: #cc1f1a;
+  }
+
+  .sm\:border-red {
+    border-color: #e3342f;
+  }
+
+  .sm\:border-red-light {
+    border-color: #ef5753;
+  }
+
+  .sm\:border-red-lighter {
+    border-color: #f9acaa;
+  }
+
+  .sm\:border-red-lightest {
+    border-color: #fcebea;
+  }
+
+  .sm\:border-orange-darkest {
+    border-color: #542605;
+  }
+
+  .sm\:border-orange-darker {
+    border-color: #7f4012;
+  }
+
+  .sm\:border-orange-dark {
+    border-color: #de751f;
+  }
+
+  .sm\:border-orange {
+    border-color: #f6993f;
+  }
+
+  .sm\:border-orange-light {
+    border-color: #faad63;
+  }
+
+  .sm\:border-orange-lighter {
+    border-color: #fcd9b6;
+  }
+
+  .sm\:border-orange-lightest {
+    border-color: #fff5eb;
+  }
+
+  .sm\:border-yellow-darkest {
+    border-color: #453411;
+  }
+
+  .sm\:border-yellow-darker {
+    border-color: #684f1d;
+  }
+
+  .sm\:border-yellow-dark {
+    border-color: #f2d024;
+  }
+
+  .sm\:border-yellow {
+    border-color: #ffed4a;
+  }
+
+  .sm\:border-yellow-light {
+    border-color: #fff382;
+  }
+
+  .sm\:border-yellow-lighter {
+    border-color: #fff9c2;
+  }
+
+  .sm\:border-yellow-lightest {
+    border-color: #fcfbeb;
+  }
+
+  .sm\:border-green-darkest {
+    border-color: #032d19;
+  }
+
+  .sm\:border-green-darker {
+    border-color: #0b4228;
+  }
+
+  .sm\:border-green-dark {
+    border-color: #1f9d55;
+  }
+
+  .sm\:border-green {
+    border-color: #38c172;
+  }
+
+  .sm\:border-green-light {
+    border-color: #51d88a;
+  }
+
+  .sm\:border-green-lighter {
+    border-color: #a2f5bf;
+  }
+
+  .sm\:border-green-lightest {
+    border-color: #e3fcec;
+  }
+
+  .sm\:border-teal-darkest {
+    border-color: #0d3331;
+  }
+
+  .sm\:border-teal-darker {
+    border-color: #174e4b;
+  }
+
+  .sm\:border-teal-dark {
+    border-color: #38a89d;
+  }
+
+  .sm\:border-teal {
+    border-color: #4dc0b5;
+  }
+
+  .sm\:border-teal-light {
+    border-color: #64d5ca;
+  }
+
+  .sm\:border-teal-lighter {
+    border-color: #a0f0ed;
+  }
+
+  .sm\:border-teal-lightest {
+    border-color: #e8fffe;
+  }
+
+  .sm\:border-blue-darkest {
+    border-color: #05233b;
+  }
+
+  .sm\:border-blue-darker {
+    border-color: #103d60;
+  }
+
+  .sm\:border-blue-dark {
+    border-color: #2779bd;
+  }
+
+  .sm\:border-blue {
+    border-color: #3490dc;
+  }
+
+  .sm\:border-blue-light {
+    border-color: #6cb2eb;
+  }
+
+  .sm\:border-blue-lighter {
+    border-color: #bcdefa;
+  }
+
+  .sm\:border-blue-lightest {
+    border-color: #eff8ff;
+  }
+
+  .sm\:border-indigo-darkest {
+    border-color: #191e38;
+  }
+
+  .sm\:border-indigo-darker {
+    border-color: #2f365f;
+  }
+
+  .sm\:border-indigo-dark {
+    border-color: #5661b3;
+  }
+
+  .sm\:border-indigo {
+    border-color: #6574cd;
+  }
+
+  .sm\:border-indigo-light {
+    border-color: #7886d7;
+  }
+
+  .sm\:border-indigo-lighter {
+    border-color: #b2b7ff;
+  }
+
+  .sm\:border-indigo-lightest {
+    border-color: #e6e8ff;
+  }
+
+  .sm\:border-purple-darkest {
+    border-color: #1f133f;
+  }
+
+  .sm\:border-purple-darker {
+    border-color: #352465;
+  }
+
+  .sm\:border-purple-dark {
+    border-color: #794acf;
+  }
+
+  .sm\:border-purple {
+    border-color: #9561e2;
+  }
+
+  .sm\:border-purple-light {
+    border-color: #a779e9;
+  }
+
+  .sm\:border-purple-lighter {
+    border-color: #d6bbfc;
+  }
+
+  .sm\:border-purple-lightest {
+    border-color: #f3ebff;
+  }
+
+  .sm\:border-pink-darkest {
+    border-color: #45051e;
+  }
+
+  .sm\:border-pink-darker {
+    border-color: #72173a;
+  }
+
+  .sm\:border-pink-dark {
+    border-color: #eb5286;
+  }
+
+  .sm\:border-pink {
+    border-color: #f66d9b;
+  }
+
+  .sm\:border-pink-light {
+    border-color: #fa7ea8;
+  }
+
+  .sm\:border-pink-lighter {
+    border-color: #ffbbca;
+  }
+
+  .sm\:border-pink-lightest {
+    border-color: #ffebef;
+  }
+
   .sm\:hover\:border-transparent:hover {
     border-color: transparent;
   }
 
-  .sm\:border-black,
   .sm\:hover\:border-black:hover {
     border-color: #222b2f;
   }
 
-  .sm\:border-grey-darkest,
   .sm\:hover\:border-grey-darkest:hover {
     border-color: #364349;
   }
 
-  .sm\:border-grey-darker,
   .sm\:hover\:border-grey-darker:hover {
     border-color: #596a73;
   }
 
-  .sm\:border-grey-dark,
   .sm\:hover\:border-grey-dark:hover {
     border-color: #70818a;
   }
 
-  .sm\:border-grey,
   .sm\:hover\:border-grey:hover {
     border-color: #9babb4;
   }
 
-  .sm\:border-grey-light,
   .sm\:hover\:border-grey-light:hover {
     border-color: #dae4e9;
   }
 
-  .sm\:border-grey-lighter,
   .sm\:hover\:border-grey-lighter:hover {
     border-color: #f3f7f9;
   }
 
-  .sm\:border-grey-lightest,
   .sm\:hover\:border-grey-lightest:hover {
     border-color: #fafcfc;
   }
 
-  .sm\:border-white,
   .sm\:hover\:border-white:hover {
     border-color: #ffffff;
   }
 
-  .sm\:border-red-darkest,
   .sm\:hover\:border-red-darkest:hover {
     border-color: #420806;
   }
 
-  .sm\:border-red-darker,
   .sm\:hover\:border-red-darker:hover {
     border-color: #6a1b19;
   }
 
-  .sm\:border-red-dark,
   .sm\:hover\:border-red-dark:hover {
     border-color: #cc1f1a;
   }
 
-  .sm\:border-red,
   .sm\:hover\:border-red:hover {
     border-color: #e3342f;
   }
 
-  .sm\:border-red-light,
   .sm\:hover\:border-red-light:hover {
     border-color: #ef5753;
   }
 
-  .sm\:border-red-lighter,
   .sm\:hover\:border-red-lighter:hover {
     border-color: #f9acaa;
   }
 
-  .sm\:border-red-lightest,
   .sm\:hover\:border-red-lightest:hover {
     border-color: #fcebea;
   }
 
-  .sm\:border-orange-darkest,
   .sm\:hover\:border-orange-darkest:hover {
     border-color: #542605;
   }
 
-  .sm\:border-orange-darker,
   .sm\:hover\:border-orange-darker:hover {
     border-color: #7f4012;
   }
 
-  .sm\:border-orange-dark,
   .sm\:hover\:border-orange-dark:hover {
     border-color: #de751f;
   }
 
-  .sm\:border-orange,
   .sm\:hover\:border-orange:hover {
     border-color: #f6993f;
   }
 
-  .sm\:border-orange-light,
   .sm\:hover\:border-orange-light:hover {
     border-color: #faad63;
   }
 
-  .sm\:border-orange-lighter,
   .sm\:hover\:border-orange-lighter:hover {
     border-color: #fcd9b6;
   }
 
-  .sm\:border-orange-lightest,
   .sm\:hover\:border-orange-lightest:hover {
     border-color: #fff5eb;
   }
 
-  .sm\:border-yellow-darkest,
   .sm\:hover\:border-yellow-darkest:hover {
     border-color: #453411;
   }
 
-  .sm\:border-yellow-darker,
   .sm\:hover\:border-yellow-darker:hover {
     border-color: #684f1d;
   }
 
-  .sm\:border-yellow-dark,
   .sm\:hover\:border-yellow-dark:hover {
     border-color: #f2d024;
   }
 
-  .sm\:border-yellow,
   .sm\:hover\:border-yellow:hover {
     border-color: #ffed4a;
   }
 
-  .sm\:border-yellow-light,
   .sm\:hover\:border-yellow-light:hover {
     border-color: #fff382;
   }
 
-  .sm\:border-yellow-lighter,
   .sm\:hover\:border-yellow-lighter:hover {
     border-color: #fff9c2;
   }
 
-  .sm\:border-yellow-lightest,
   .sm\:hover\:border-yellow-lightest:hover {
     border-color: #fcfbeb;
   }
 
-  .sm\:border-green-darkest,
   .sm\:hover\:border-green-darkest:hover {
     border-color: #032d19;
   }
 
-  .sm\:border-green-darker,
   .sm\:hover\:border-green-darker:hover {
     border-color: #0b4228;
   }
 
-  .sm\:border-green-dark,
   .sm\:hover\:border-green-dark:hover {
     border-color: #1f9d55;
   }
 
-  .sm\:border-green,
   .sm\:hover\:border-green:hover {
     border-color: #38c172;
   }
 
-  .sm\:border-green-light,
   .sm\:hover\:border-green-light:hover {
     border-color: #51d88a;
   }
 
-  .sm\:border-green-lighter,
   .sm\:hover\:border-green-lighter:hover {
     border-color: #a2f5bf;
   }
 
-  .sm\:border-green-lightest,
   .sm\:hover\:border-green-lightest:hover {
     border-color: #e3fcec;
   }
 
-  .sm\:border-teal-darkest,
   .sm\:hover\:border-teal-darkest:hover {
     border-color: #0d3331;
   }
 
-  .sm\:border-teal-darker,
   .sm\:hover\:border-teal-darker:hover {
     border-color: #174e4b;
   }
 
-  .sm\:border-teal-dark,
   .sm\:hover\:border-teal-dark:hover {
     border-color: #38a89d;
   }
 
-  .sm\:border-teal,
   .sm\:hover\:border-teal:hover {
     border-color: #4dc0b5;
   }
 
-  .sm\:border-teal-light,
   .sm\:hover\:border-teal-light:hover {
     border-color: #64d5ca;
   }
 
-  .sm\:border-teal-lighter,
   .sm\:hover\:border-teal-lighter:hover {
     border-color: #a0f0ed;
   }
 
-  .sm\:border-teal-lightest,
   .sm\:hover\:border-teal-lightest:hover {
     border-color: #e8fffe;
   }
 
-  .sm\:border-blue-darkest,
   .sm\:hover\:border-blue-darkest:hover {
     border-color: #05233b;
   }
 
-  .sm\:border-blue-darker,
   .sm\:hover\:border-blue-darker:hover {
     border-color: #103d60;
   }
 
-  .sm\:border-blue-dark,
   .sm\:hover\:border-blue-dark:hover {
     border-color: #2779bd;
   }
 
-  .sm\:border-blue,
   .sm\:hover\:border-blue:hover {
     border-color: #3490dc;
   }
 
-  .sm\:border-blue-light,
   .sm\:hover\:border-blue-light:hover {
     border-color: #6cb2eb;
   }
 
-  .sm\:border-blue-lighter,
   .sm\:hover\:border-blue-lighter:hover {
     border-color: #bcdefa;
   }
 
-  .sm\:border-blue-lightest,
   .sm\:hover\:border-blue-lightest:hover {
     border-color: #eff8ff;
   }
 
-  .sm\:border-indigo-darkest,
   .sm\:hover\:border-indigo-darkest:hover {
     border-color: #191e38;
   }
 
-  .sm\:border-indigo-darker,
   .sm\:hover\:border-indigo-darker:hover {
     border-color: #2f365f;
   }
 
-  .sm\:border-indigo-dark,
   .sm\:hover\:border-indigo-dark:hover {
     border-color: #5661b3;
   }
 
-  .sm\:border-indigo,
   .sm\:hover\:border-indigo:hover {
     border-color: #6574cd;
   }
 
-  .sm\:border-indigo-light,
   .sm\:hover\:border-indigo-light:hover {
     border-color: #7886d7;
   }
 
-  .sm\:border-indigo-lighter,
   .sm\:hover\:border-indigo-lighter:hover {
     border-color: #b2b7ff;
   }
 
-  .sm\:border-indigo-lightest,
   .sm\:hover\:border-indigo-lightest:hover {
     border-color: #e6e8ff;
   }
 
-  .sm\:border-purple-darkest,
   .sm\:hover\:border-purple-darkest:hover {
     border-color: #1f133f;
   }
 
-  .sm\:border-purple-darker,
   .sm\:hover\:border-purple-darker:hover {
     border-color: #352465;
   }
 
-  .sm\:border-purple-dark,
   .sm\:hover\:border-purple-dark:hover {
     border-color: #794acf;
   }
 
-  .sm\:border-purple,
   .sm\:hover\:border-purple:hover {
     border-color: #9561e2;
   }
 
-  .sm\:border-purple-light,
   .sm\:hover\:border-purple-light:hover {
     border-color: #a779e9;
   }
 
-  .sm\:border-purple-lighter,
   .sm\:hover\:border-purple-lighter:hover {
     border-color: #d6bbfc;
   }
 
-  .sm\:border-purple-lightest,
   .sm\:hover\:border-purple-lightest:hover {
     border-color: #f3ebff;
   }
 
-  .sm\:border-pink-darkest,
   .sm\:hover\:border-pink-darkest:hover {
     border-color: #45051e;
   }
 
-  .sm\:border-pink-darker,
   .sm\:hover\:border-pink-darker:hover {
     border-color: #72173a;
   }
 
-  .sm\:border-pink-dark,
   .sm\:hover\:border-pink-dark:hover {
     border-color: #eb5286;
   }
 
-  .sm\:border-pink,
   .sm\:hover\:border-pink:hover {
     border-color: #f66d9b;
   }
 
-  .sm\:border-pink-light,
   .sm\:hover\:border-pink-light:hover {
     border-color: #fa7ea8;
   }
 
-  .sm\:border-pink-lighter,
   .sm\:hover\:border-pink-lighter:hover {
     border-color: #ffbbca;
   }
 
-  .sm\:border-pink-lightest,
   .sm\:hover\:border-pink-lightest:hover {
     border-color: #ffebef;
   }
@@ -6888,47 +8326,74 @@ button,
     font-size: 3rem;
   }
 
-  .md\:font-hairline,
+  .md\:font-hairline {
+    font-weight: 100;
+  }
+
+  .md\:font-thin {
+    font-weight: 200;
+  }
+
+  .md\:font-light {
+    font-weight: 300;
+  }
+
+  .md\:font-normal {
+    font-weight: 400;
+  }
+
+  .md\:font-medium {
+    font-weight: 500;
+  }
+
+  .md\:font-semibold {
+    font-weight: 600;
+  }
+
+  .md\:font-bold {
+    font-weight: 700;
+  }
+
+  .md\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .md\:font-black {
+    font-weight: 900;
+  }
+
   .md\:hover\:font-hairline:hover {
     font-weight: 100;
   }
 
-  .md\:font-thin,
   .md\:hover\:font-thin:hover {
     font-weight: 200;
   }
 
-  .md\:font-light,
   .md\:hover\:font-light:hover {
     font-weight: 300;
   }
 
-  .md\:font-normal,
   .md\:hover\:font-normal:hover {
     font-weight: 400;
   }
 
-  .md\:font-medium,
   .md\:hover\:font-medium:hover {
     font-weight: 500;
   }
 
-  .md\:font-semibold,
   .md\:hover\:font-semibold:hover {
     font-weight: 600;
   }
 
-  .md\:font-bold,
   .md\:hover\:font-bold:hover {
     font-weight: 700;
   }
 
-  .md\:font-extrabold,
   .md\:hover\:font-extrabold:hover {
     font-weight: 800;
   }
 
-  .md\:font-black,
   .md\:hover\:font-black:hover {
     font-weight: 900;
   }
@@ -6945,367 +8410,586 @@ button,
     font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   }
 
-  .md\:text-transparent,
+  .md\:text-transparent {
+    color: transparent;
+  }
+
+  .md\:text-black {
+    color: #222b2f;
+  }
+
+  .md\:text-grey-darkest {
+    color: #364349;
+  }
+
+  .md\:text-grey-darker {
+    color: #596a73;
+  }
+
+  .md\:text-grey-dark {
+    color: #70818a;
+  }
+
+  .md\:text-grey {
+    color: #9babb4;
+  }
+
+  .md\:text-grey-light {
+    color: #dae4e9;
+  }
+
+  .md\:text-grey-lighter {
+    color: #f3f7f9;
+  }
+
+  .md\:text-grey-lightest {
+    color: #fafcfc;
+  }
+
+  .md\:text-white {
+    color: #ffffff;
+  }
+
+  .md\:text-red-darkest {
+    color: #420806;
+  }
+
+  .md\:text-red-darker {
+    color: #6a1b19;
+  }
+
+  .md\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .md\:text-red {
+    color: #e3342f;
+  }
+
+  .md\:text-red-light {
+    color: #ef5753;
+  }
+
+  .md\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .md\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .md\:text-orange-darkest {
+    color: #542605;
+  }
+
+  .md\:text-orange-darker {
+    color: #7f4012;
+  }
+
+  .md\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .md\:text-orange {
+    color: #f6993f;
+  }
+
+  .md\:text-orange-light {
+    color: #faad63;
+  }
+
+  .md\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .md\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .md\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .md\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .md\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .md\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .md\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .md\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .md\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .md\:text-green-darkest {
+    color: #032d19;
+  }
+
+  .md\:text-green-darker {
+    color: #0b4228;
+  }
+
+  .md\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .md\:text-green {
+    color: #38c172;
+  }
+
+  .md\:text-green-light {
+    color: #51d88a;
+  }
+
+  .md\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .md\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .md\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .md\:text-teal-darker {
+    color: #174e4b;
+  }
+
+  .md\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .md\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .md\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .md\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .md\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .md\:text-blue-darkest {
+    color: #05233b;
+  }
+
+  .md\:text-blue-darker {
+    color: #103d60;
+  }
+
+  .md\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .md\:text-blue {
+    color: #3490dc;
+  }
+
+  .md\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .md\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .md\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .md\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .md\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .md\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .md\:text-indigo {
+    color: #6574cd;
+  }
+
+  .md\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .md\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .md\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .md\:text-purple-darkest {
+    color: #1f133f;
+  }
+
+  .md\:text-purple-darker {
+    color: #352465;
+  }
+
+  .md\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .md\:text-purple {
+    color: #9561e2;
+  }
+
+  .md\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .md\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .md\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .md\:text-pink-darkest {
+    color: #45051e;
+  }
+
+  .md\:text-pink-darker {
+    color: #72173a;
+  }
+
+  .md\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .md\:text-pink {
+    color: #f66d9b;
+  }
+
+  .md\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .md\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .md\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .md\:hover\:text-transparent:hover {
     color: transparent;
   }
 
-  .md\:text-black,
   .md\:hover\:text-black:hover {
     color: #222b2f;
   }
 
-  .md\:text-grey-darkest,
   .md\:hover\:text-grey-darkest:hover {
     color: #364349;
   }
 
-  .md\:text-grey-darker,
   .md\:hover\:text-grey-darker:hover {
     color: #596a73;
   }
 
-  .md\:text-grey-dark,
   .md\:hover\:text-grey-dark:hover {
     color: #70818a;
   }
 
-  .md\:text-grey,
   .md\:hover\:text-grey:hover {
     color: #9babb4;
   }
 
-  .md\:text-grey-light,
   .md\:hover\:text-grey-light:hover {
     color: #dae4e9;
   }
 
-  .md\:text-grey-lighter,
   .md\:hover\:text-grey-lighter:hover {
     color: #f3f7f9;
   }
 
-  .md\:text-grey-lightest,
   .md\:hover\:text-grey-lightest:hover {
     color: #fafcfc;
   }
 
-  .md\:text-white,
   .md\:hover\:text-white:hover {
     color: #ffffff;
   }
 
-  .md\:text-red-darkest,
   .md\:hover\:text-red-darkest:hover {
     color: #420806;
   }
 
-  .md\:text-red-darker,
   .md\:hover\:text-red-darker:hover {
     color: #6a1b19;
   }
 
-  .md\:text-red-dark,
   .md\:hover\:text-red-dark:hover {
     color: #cc1f1a;
   }
 
-  .md\:text-red,
   .md\:hover\:text-red:hover {
     color: #e3342f;
   }
 
-  .md\:text-red-light,
   .md\:hover\:text-red-light:hover {
     color: #ef5753;
   }
 
-  .md\:text-red-lighter,
   .md\:hover\:text-red-lighter:hover {
     color: #f9acaa;
   }
 
-  .md\:text-red-lightest,
   .md\:hover\:text-red-lightest:hover {
     color: #fcebea;
   }
 
-  .md\:text-orange-darkest,
   .md\:hover\:text-orange-darkest:hover {
     color: #542605;
   }
 
-  .md\:text-orange-darker,
   .md\:hover\:text-orange-darker:hover {
     color: #7f4012;
   }
 
-  .md\:text-orange-dark,
   .md\:hover\:text-orange-dark:hover {
     color: #de751f;
   }
 
-  .md\:text-orange,
   .md\:hover\:text-orange:hover {
     color: #f6993f;
   }
 
-  .md\:text-orange-light,
   .md\:hover\:text-orange-light:hover {
     color: #faad63;
   }
 
-  .md\:text-orange-lighter,
   .md\:hover\:text-orange-lighter:hover {
     color: #fcd9b6;
   }
 
-  .md\:text-orange-lightest,
   .md\:hover\:text-orange-lightest:hover {
     color: #fff5eb;
   }
 
-  .md\:text-yellow-darkest,
   .md\:hover\:text-yellow-darkest:hover {
     color: #453411;
   }
 
-  .md\:text-yellow-darker,
   .md\:hover\:text-yellow-darker:hover {
     color: #684f1d;
   }
 
-  .md\:text-yellow-dark,
   .md\:hover\:text-yellow-dark:hover {
     color: #f2d024;
   }
 
-  .md\:text-yellow,
   .md\:hover\:text-yellow:hover {
     color: #ffed4a;
   }
 
-  .md\:text-yellow-light,
   .md\:hover\:text-yellow-light:hover {
     color: #fff382;
   }
 
-  .md\:text-yellow-lighter,
   .md\:hover\:text-yellow-lighter:hover {
     color: #fff9c2;
   }
 
-  .md\:text-yellow-lightest,
   .md\:hover\:text-yellow-lightest:hover {
     color: #fcfbeb;
   }
 
-  .md\:text-green-darkest,
   .md\:hover\:text-green-darkest:hover {
     color: #032d19;
   }
 
-  .md\:text-green-darker,
   .md\:hover\:text-green-darker:hover {
     color: #0b4228;
   }
 
-  .md\:text-green-dark,
   .md\:hover\:text-green-dark:hover {
     color: #1f9d55;
   }
 
-  .md\:text-green,
   .md\:hover\:text-green:hover {
     color: #38c172;
   }
 
-  .md\:text-green-light,
   .md\:hover\:text-green-light:hover {
     color: #51d88a;
   }
 
-  .md\:text-green-lighter,
   .md\:hover\:text-green-lighter:hover {
     color: #a2f5bf;
   }
 
-  .md\:text-green-lightest,
   .md\:hover\:text-green-lightest:hover {
     color: #e3fcec;
   }
 
-  .md\:text-teal-darkest,
   .md\:hover\:text-teal-darkest:hover {
     color: #0d3331;
   }
 
-  .md\:text-teal-darker,
   .md\:hover\:text-teal-darker:hover {
     color: #174e4b;
   }
 
-  .md\:text-teal-dark,
   .md\:hover\:text-teal-dark:hover {
     color: #38a89d;
   }
 
-  .md\:text-teal,
   .md\:hover\:text-teal:hover {
     color: #4dc0b5;
   }
 
-  .md\:text-teal-light,
   .md\:hover\:text-teal-light:hover {
     color: #64d5ca;
   }
 
-  .md\:text-teal-lighter,
   .md\:hover\:text-teal-lighter:hover {
     color: #a0f0ed;
   }
 
-  .md\:text-teal-lightest,
   .md\:hover\:text-teal-lightest:hover {
     color: #e8fffe;
   }
 
-  .md\:text-blue-darkest,
   .md\:hover\:text-blue-darkest:hover {
     color: #05233b;
   }
 
-  .md\:text-blue-darker,
   .md\:hover\:text-blue-darker:hover {
     color: #103d60;
   }
 
-  .md\:text-blue-dark,
   .md\:hover\:text-blue-dark:hover {
     color: #2779bd;
   }
 
-  .md\:text-blue,
   .md\:hover\:text-blue:hover {
     color: #3490dc;
   }
 
-  .md\:text-blue-light,
   .md\:hover\:text-blue-light:hover {
     color: #6cb2eb;
   }
 
-  .md\:text-blue-lighter,
   .md\:hover\:text-blue-lighter:hover {
     color: #bcdefa;
   }
 
-  .md\:text-blue-lightest,
   .md\:hover\:text-blue-lightest:hover {
     color: #eff8ff;
   }
 
-  .md\:text-indigo-darkest,
   .md\:hover\:text-indigo-darkest:hover {
     color: #191e38;
   }
 
-  .md\:text-indigo-darker,
   .md\:hover\:text-indigo-darker:hover {
     color: #2f365f;
   }
 
-  .md\:text-indigo-dark,
   .md\:hover\:text-indigo-dark:hover {
     color: #5661b3;
   }
 
-  .md\:text-indigo,
   .md\:hover\:text-indigo:hover {
     color: #6574cd;
   }
 
-  .md\:text-indigo-light,
   .md\:hover\:text-indigo-light:hover {
     color: #7886d7;
   }
 
-  .md\:text-indigo-lighter,
   .md\:hover\:text-indigo-lighter:hover {
     color: #b2b7ff;
   }
 
-  .md\:text-indigo-lightest,
   .md\:hover\:text-indigo-lightest:hover {
     color: #e6e8ff;
   }
 
-  .md\:text-purple-darkest,
   .md\:hover\:text-purple-darkest:hover {
     color: #1f133f;
   }
 
-  .md\:text-purple-darker,
   .md\:hover\:text-purple-darker:hover {
     color: #352465;
   }
 
-  .md\:text-purple-dark,
   .md\:hover\:text-purple-dark:hover {
     color: #794acf;
   }
 
-  .md\:text-purple,
   .md\:hover\:text-purple:hover {
     color: #9561e2;
   }
 
-  .md\:text-purple-light,
   .md\:hover\:text-purple-light:hover {
     color: #a779e9;
   }
 
-  .md\:text-purple-lighter,
   .md\:hover\:text-purple-lighter:hover {
     color: #d6bbfc;
   }
 
-  .md\:text-purple-lightest,
   .md\:hover\:text-purple-lightest:hover {
     color: #f3ebff;
   }
 
-  .md\:text-pink-darkest,
   .md\:hover\:text-pink-darkest:hover {
     color: #45051e;
   }
 
-  .md\:text-pink-darker,
   .md\:hover\:text-pink-darker:hover {
     color: #72173a;
   }
 
-  .md\:text-pink-dark,
   .md\:hover\:text-pink-dark:hover {
     color: #eb5286;
   }
 
-  .md\:text-pink,
   .md\:hover\:text-pink:hover {
     color: #f66d9b;
   }
 
-  .md\:text-pink-light,
   .md\:hover\:text-pink-light:hover {
     color: #fa7ea8;
   }
 
-  .md\:text-pink-lighter,
   .md\:hover\:text-pink-lighter:hover {
     color: #ffbbca;
   }
 
-  .md\:text-pink-lightest,
   .md\:hover\:text-pink-lightest:hover {
     color: #ffebef;
   }
@@ -7388,58 +9072,93 @@ button,
     white-space: nowrap;
   }
 
-  .md\:italic,
+  .md\:italic {
+    font-style: italic;
+  }
+
+  .md\:roman {
+    font-style: normal;
+  }
+
+  .md\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .md\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .md\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .md\:normal-case {
+    text-transform: none;
+  }
+
+  .md\:underline {
+    text-decoration: underline;
+  }
+
+  .md\:line-through {
+    text-decoration: line-through;
+  }
+
+  .md\:no-underline {
+    text-decoration: none;
+  }
+
+  .md\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .md\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
   .md\:hover\:italic:hover {
     font-style: italic;
   }
 
-  .md\:roman,
   .md\:hover\:roman:hover {
     font-style: normal;
   }
 
-  .md\:uppercase,
   .md\:hover\:uppercase:hover {
     text-transform: uppercase;
   }
 
-  .md\:lowercase,
   .md\:hover\:lowercase:hover {
     text-transform: lowercase;
   }
 
-  .md\:capitalize,
   .md\:hover\:capitalize:hover {
     text-transform: capitalize;
   }
 
-  .md\:normal-case,
   .md\:hover\:normal-case:hover {
     text-transform: none;
   }
 
-  .md\:underline,
   .md\:hover\:underline:hover {
     text-decoration: underline;
   }
 
-  .md\:line-through,
   .md\:hover\:line-through:hover {
     text-decoration: line-through;
   }
 
-  .md\:no-underline,
   .md\:hover\:no-underline:hover {
     text-decoration: none;
   }
 
-  .md\:antialiased,
   .md\:hover\:antialiased:hover {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .md\:subpixel-antialiased,
   .md\:hover\:subpixel-antialiased:hover {
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
@@ -7469,367 +9188,586 @@ button,
     vertical-align: text-bottom;
   }
 
-  .md\:bg-transparent,
+  .md\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .md\:bg-black {
+    background-color: #222b2f;
+  }
+
+  .md\:bg-grey-darkest {
+    background-color: #364349;
+  }
+
+  .md\:bg-grey-darker {
+    background-color: #596a73;
+  }
+
+  .md\:bg-grey-dark {
+    background-color: #70818a;
+  }
+
+  .md\:bg-grey {
+    background-color: #9babb4;
+  }
+
+  .md\:bg-grey-light {
+    background-color: #dae4e9;
+  }
+
+  .md\:bg-grey-lighter {
+    background-color: #f3f7f9;
+  }
+
+  .md\:bg-grey-lightest {
+    background-color: #fafcfc;
+  }
+
+  .md\:bg-white {
+    background-color: #ffffff;
+  }
+
+  .md\:bg-red-darkest {
+    background-color: #420806;
+  }
+
+  .md\:bg-red-darker {
+    background-color: #6a1b19;
+  }
+
+  .md\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .md\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .md\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .md\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .md\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .md\:bg-orange-darkest {
+    background-color: #542605;
+  }
+
+  .md\:bg-orange-darker {
+    background-color: #7f4012;
+  }
+
+  .md\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .md\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .md\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .md\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .md\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .md\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .md\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .md\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .md\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .md\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .md\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .md\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .md\:bg-green-darkest {
+    background-color: #032d19;
+  }
+
+  .md\:bg-green-darker {
+    background-color: #0b4228;
+  }
+
+  .md\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .md\:bg-green {
+    background-color: #38c172;
+  }
+
+  .md\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .md\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .md\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .md\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .md\:bg-teal-darker {
+    background-color: #174e4b;
+  }
+
+  .md\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .md\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .md\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .md\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .md\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .md\:bg-blue-darkest {
+    background-color: #05233b;
+  }
+
+  .md\:bg-blue-darker {
+    background-color: #103d60;
+  }
+
+  .md\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .md\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .md\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .md\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .md\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .md\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .md\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .md\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .md\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .md\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .md\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .md\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .md\:bg-purple-darkest {
+    background-color: #1f133f;
+  }
+
+  .md\:bg-purple-darker {
+    background-color: #352465;
+  }
+
+  .md\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .md\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .md\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .md\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .md\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .md\:bg-pink-darkest {
+    background-color: #45051e;
+  }
+
+  .md\:bg-pink-darker {
+    background-color: #72173a;
+  }
+
+  .md\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .md\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .md\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .md\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .md\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .md\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
 
-  .md\:bg-black,
   .md\:hover\:bg-black:hover {
     background-color: #222b2f;
   }
 
-  .md\:bg-grey-darkest,
   .md\:hover\:bg-grey-darkest:hover {
     background-color: #364349;
   }
 
-  .md\:bg-grey-darker,
   .md\:hover\:bg-grey-darker:hover {
     background-color: #596a73;
   }
 
-  .md\:bg-grey-dark,
   .md\:hover\:bg-grey-dark:hover {
     background-color: #70818a;
   }
 
-  .md\:bg-grey,
   .md\:hover\:bg-grey:hover {
     background-color: #9babb4;
   }
 
-  .md\:bg-grey-light,
   .md\:hover\:bg-grey-light:hover {
     background-color: #dae4e9;
   }
 
-  .md\:bg-grey-lighter,
   .md\:hover\:bg-grey-lighter:hover {
     background-color: #f3f7f9;
   }
 
-  .md\:bg-grey-lightest,
   .md\:hover\:bg-grey-lightest:hover {
     background-color: #fafcfc;
   }
 
-  .md\:bg-white,
   .md\:hover\:bg-white:hover {
     background-color: #ffffff;
   }
 
-  .md\:bg-red-darkest,
   .md\:hover\:bg-red-darkest:hover {
     background-color: #420806;
   }
 
-  .md\:bg-red-darker,
   .md\:hover\:bg-red-darker:hover {
     background-color: #6a1b19;
   }
 
-  .md\:bg-red-dark,
   .md\:hover\:bg-red-dark:hover {
     background-color: #cc1f1a;
   }
 
-  .md\:bg-red,
   .md\:hover\:bg-red:hover {
     background-color: #e3342f;
   }
 
-  .md\:bg-red-light,
   .md\:hover\:bg-red-light:hover {
     background-color: #ef5753;
   }
 
-  .md\:bg-red-lighter,
   .md\:hover\:bg-red-lighter:hover {
     background-color: #f9acaa;
   }
 
-  .md\:bg-red-lightest,
   .md\:hover\:bg-red-lightest:hover {
     background-color: #fcebea;
   }
 
-  .md\:bg-orange-darkest,
   .md\:hover\:bg-orange-darkest:hover {
     background-color: #542605;
   }
 
-  .md\:bg-orange-darker,
   .md\:hover\:bg-orange-darker:hover {
     background-color: #7f4012;
   }
 
-  .md\:bg-orange-dark,
   .md\:hover\:bg-orange-dark:hover {
     background-color: #de751f;
   }
 
-  .md\:bg-orange,
   .md\:hover\:bg-orange:hover {
     background-color: #f6993f;
   }
 
-  .md\:bg-orange-light,
   .md\:hover\:bg-orange-light:hover {
     background-color: #faad63;
   }
 
-  .md\:bg-orange-lighter,
   .md\:hover\:bg-orange-lighter:hover {
     background-color: #fcd9b6;
   }
 
-  .md\:bg-orange-lightest,
   .md\:hover\:bg-orange-lightest:hover {
     background-color: #fff5eb;
   }
 
-  .md\:bg-yellow-darkest,
   .md\:hover\:bg-yellow-darkest:hover {
     background-color: #453411;
   }
 
-  .md\:bg-yellow-darker,
   .md\:hover\:bg-yellow-darker:hover {
     background-color: #684f1d;
   }
 
-  .md\:bg-yellow-dark,
   .md\:hover\:bg-yellow-dark:hover {
     background-color: #f2d024;
   }
 
-  .md\:bg-yellow,
   .md\:hover\:bg-yellow:hover {
     background-color: #ffed4a;
   }
 
-  .md\:bg-yellow-light,
   .md\:hover\:bg-yellow-light:hover {
     background-color: #fff382;
   }
 
-  .md\:bg-yellow-lighter,
   .md\:hover\:bg-yellow-lighter:hover {
     background-color: #fff9c2;
   }
 
-  .md\:bg-yellow-lightest,
   .md\:hover\:bg-yellow-lightest:hover {
     background-color: #fcfbeb;
   }
 
-  .md\:bg-green-darkest,
   .md\:hover\:bg-green-darkest:hover {
     background-color: #032d19;
   }
 
-  .md\:bg-green-darker,
   .md\:hover\:bg-green-darker:hover {
     background-color: #0b4228;
   }
 
-  .md\:bg-green-dark,
   .md\:hover\:bg-green-dark:hover {
     background-color: #1f9d55;
   }
 
-  .md\:bg-green,
   .md\:hover\:bg-green:hover {
     background-color: #38c172;
   }
 
-  .md\:bg-green-light,
   .md\:hover\:bg-green-light:hover {
     background-color: #51d88a;
   }
 
-  .md\:bg-green-lighter,
   .md\:hover\:bg-green-lighter:hover {
     background-color: #a2f5bf;
   }
 
-  .md\:bg-green-lightest,
   .md\:hover\:bg-green-lightest:hover {
     background-color: #e3fcec;
   }
 
-  .md\:bg-teal-darkest,
   .md\:hover\:bg-teal-darkest:hover {
     background-color: #0d3331;
   }
 
-  .md\:bg-teal-darker,
   .md\:hover\:bg-teal-darker:hover {
     background-color: #174e4b;
   }
 
-  .md\:bg-teal-dark,
   .md\:hover\:bg-teal-dark:hover {
     background-color: #38a89d;
   }
 
-  .md\:bg-teal,
   .md\:hover\:bg-teal:hover {
     background-color: #4dc0b5;
   }
 
-  .md\:bg-teal-light,
   .md\:hover\:bg-teal-light:hover {
     background-color: #64d5ca;
   }
 
-  .md\:bg-teal-lighter,
   .md\:hover\:bg-teal-lighter:hover {
     background-color: #a0f0ed;
   }
 
-  .md\:bg-teal-lightest,
   .md\:hover\:bg-teal-lightest:hover {
     background-color: #e8fffe;
   }
 
-  .md\:bg-blue-darkest,
   .md\:hover\:bg-blue-darkest:hover {
     background-color: #05233b;
   }
 
-  .md\:bg-blue-darker,
   .md\:hover\:bg-blue-darker:hover {
     background-color: #103d60;
   }
 
-  .md\:bg-blue-dark,
   .md\:hover\:bg-blue-dark:hover {
     background-color: #2779bd;
   }
 
-  .md\:bg-blue,
   .md\:hover\:bg-blue:hover {
     background-color: #3490dc;
   }
 
-  .md\:bg-blue-light,
   .md\:hover\:bg-blue-light:hover {
     background-color: #6cb2eb;
   }
 
-  .md\:bg-blue-lighter,
   .md\:hover\:bg-blue-lighter:hover {
     background-color: #bcdefa;
   }
 
-  .md\:bg-blue-lightest,
   .md\:hover\:bg-blue-lightest:hover {
     background-color: #eff8ff;
   }
 
-  .md\:bg-indigo-darkest,
   .md\:hover\:bg-indigo-darkest:hover {
     background-color: #191e38;
   }
 
-  .md\:bg-indigo-darker,
   .md\:hover\:bg-indigo-darker:hover {
     background-color: #2f365f;
   }
 
-  .md\:bg-indigo-dark,
   .md\:hover\:bg-indigo-dark:hover {
     background-color: #5661b3;
   }
 
-  .md\:bg-indigo,
   .md\:hover\:bg-indigo:hover {
     background-color: #6574cd;
   }
 
-  .md\:bg-indigo-light,
   .md\:hover\:bg-indigo-light:hover {
     background-color: #7886d7;
   }
 
-  .md\:bg-indigo-lighter,
   .md\:hover\:bg-indigo-lighter:hover {
     background-color: #b2b7ff;
   }
 
-  .md\:bg-indigo-lightest,
   .md\:hover\:bg-indigo-lightest:hover {
     background-color: #e6e8ff;
   }
 
-  .md\:bg-purple-darkest,
   .md\:hover\:bg-purple-darkest:hover {
     background-color: #1f133f;
   }
 
-  .md\:bg-purple-darker,
   .md\:hover\:bg-purple-darker:hover {
     background-color: #352465;
   }
 
-  .md\:bg-purple-dark,
   .md\:hover\:bg-purple-dark:hover {
     background-color: #794acf;
   }
 
-  .md\:bg-purple,
   .md\:hover\:bg-purple:hover {
     background-color: #9561e2;
   }
 
-  .md\:bg-purple-light,
   .md\:hover\:bg-purple-light:hover {
     background-color: #a779e9;
   }
 
-  .md\:bg-purple-lighter,
   .md\:hover\:bg-purple-lighter:hover {
     background-color: #d6bbfc;
   }
 
-  .md\:bg-purple-lightest,
   .md\:hover\:bg-purple-lightest:hover {
     background-color: #f3ebff;
   }
 
-  .md\:bg-pink-darkest,
   .md\:hover\:bg-pink-darkest:hover {
     background-color: #45051e;
   }
 
-  .md\:bg-pink-darker,
   .md\:hover\:bg-pink-darker:hover {
     background-color: #72173a;
   }
 
-  .md\:bg-pink-dark,
   .md\:hover\:bg-pink-dark:hover {
     background-color: #eb5286;
   }
 
-  .md\:bg-pink,
   .md\:hover\:bg-pink:hover {
     background-color: #f66d9b;
   }
 
-  .md\:bg-pink-light,
   .md\:hover\:bg-pink-light:hover {
     background-color: #fa7ea8;
   }
 
-  .md\:bg-pink-lighter,
   .md\:hover\:bg-pink-lighter:hover {
     background-color: #ffbbca;
   }
 
-  .md\:bg-pink-lightest,
   .md\:hover\:bg-pink-lightest:hover {
     background-color: #ffebef;
   }
@@ -7978,367 +9916,586 @@ button,
     border-left-width: 1px;
   }
 
-  .md\:border-transparent,
+  .md\:border-transparent {
+    border-color: transparent;
+  }
+
+  .md\:border-black {
+    border-color: #222b2f;
+  }
+
+  .md\:border-grey-darkest {
+    border-color: #364349;
+  }
+
+  .md\:border-grey-darker {
+    border-color: #596a73;
+  }
+
+  .md\:border-grey-dark {
+    border-color: #70818a;
+  }
+
+  .md\:border-grey {
+    border-color: #9babb4;
+  }
+
+  .md\:border-grey-light {
+    border-color: #dae4e9;
+  }
+
+  .md\:border-grey-lighter {
+    border-color: #f3f7f9;
+  }
+
+  .md\:border-grey-lightest {
+    border-color: #fafcfc;
+  }
+
+  .md\:border-white {
+    border-color: #ffffff;
+  }
+
+  .md\:border-red-darkest {
+    border-color: #420806;
+  }
+
+  .md\:border-red-darker {
+    border-color: #6a1b19;
+  }
+
+  .md\:border-red-dark {
+    border-color: #cc1f1a;
+  }
+
+  .md\:border-red {
+    border-color: #e3342f;
+  }
+
+  .md\:border-red-light {
+    border-color: #ef5753;
+  }
+
+  .md\:border-red-lighter {
+    border-color: #f9acaa;
+  }
+
+  .md\:border-red-lightest {
+    border-color: #fcebea;
+  }
+
+  .md\:border-orange-darkest {
+    border-color: #542605;
+  }
+
+  .md\:border-orange-darker {
+    border-color: #7f4012;
+  }
+
+  .md\:border-orange-dark {
+    border-color: #de751f;
+  }
+
+  .md\:border-orange {
+    border-color: #f6993f;
+  }
+
+  .md\:border-orange-light {
+    border-color: #faad63;
+  }
+
+  .md\:border-orange-lighter {
+    border-color: #fcd9b6;
+  }
+
+  .md\:border-orange-lightest {
+    border-color: #fff5eb;
+  }
+
+  .md\:border-yellow-darkest {
+    border-color: #453411;
+  }
+
+  .md\:border-yellow-darker {
+    border-color: #684f1d;
+  }
+
+  .md\:border-yellow-dark {
+    border-color: #f2d024;
+  }
+
+  .md\:border-yellow {
+    border-color: #ffed4a;
+  }
+
+  .md\:border-yellow-light {
+    border-color: #fff382;
+  }
+
+  .md\:border-yellow-lighter {
+    border-color: #fff9c2;
+  }
+
+  .md\:border-yellow-lightest {
+    border-color: #fcfbeb;
+  }
+
+  .md\:border-green-darkest {
+    border-color: #032d19;
+  }
+
+  .md\:border-green-darker {
+    border-color: #0b4228;
+  }
+
+  .md\:border-green-dark {
+    border-color: #1f9d55;
+  }
+
+  .md\:border-green {
+    border-color: #38c172;
+  }
+
+  .md\:border-green-light {
+    border-color: #51d88a;
+  }
+
+  .md\:border-green-lighter {
+    border-color: #a2f5bf;
+  }
+
+  .md\:border-green-lightest {
+    border-color: #e3fcec;
+  }
+
+  .md\:border-teal-darkest {
+    border-color: #0d3331;
+  }
+
+  .md\:border-teal-darker {
+    border-color: #174e4b;
+  }
+
+  .md\:border-teal-dark {
+    border-color: #38a89d;
+  }
+
+  .md\:border-teal {
+    border-color: #4dc0b5;
+  }
+
+  .md\:border-teal-light {
+    border-color: #64d5ca;
+  }
+
+  .md\:border-teal-lighter {
+    border-color: #a0f0ed;
+  }
+
+  .md\:border-teal-lightest {
+    border-color: #e8fffe;
+  }
+
+  .md\:border-blue-darkest {
+    border-color: #05233b;
+  }
+
+  .md\:border-blue-darker {
+    border-color: #103d60;
+  }
+
+  .md\:border-blue-dark {
+    border-color: #2779bd;
+  }
+
+  .md\:border-blue {
+    border-color: #3490dc;
+  }
+
+  .md\:border-blue-light {
+    border-color: #6cb2eb;
+  }
+
+  .md\:border-blue-lighter {
+    border-color: #bcdefa;
+  }
+
+  .md\:border-blue-lightest {
+    border-color: #eff8ff;
+  }
+
+  .md\:border-indigo-darkest {
+    border-color: #191e38;
+  }
+
+  .md\:border-indigo-darker {
+    border-color: #2f365f;
+  }
+
+  .md\:border-indigo-dark {
+    border-color: #5661b3;
+  }
+
+  .md\:border-indigo {
+    border-color: #6574cd;
+  }
+
+  .md\:border-indigo-light {
+    border-color: #7886d7;
+  }
+
+  .md\:border-indigo-lighter {
+    border-color: #b2b7ff;
+  }
+
+  .md\:border-indigo-lightest {
+    border-color: #e6e8ff;
+  }
+
+  .md\:border-purple-darkest {
+    border-color: #1f133f;
+  }
+
+  .md\:border-purple-darker {
+    border-color: #352465;
+  }
+
+  .md\:border-purple-dark {
+    border-color: #794acf;
+  }
+
+  .md\:border-purple {
+    border-color: #9561e2;
+  }
+
+  .md\:border-purple-light {
+    border-color: #a779e9;
+  }
+
+  .md\:border-purple-lighter {
+    border-color: #d6bbfc;
+  }
+
+  .md\:border-purple-lightest {
+    border-color: #f3ebff;
+  }
+
+  .md\:border-pink-darkest {
+    border-color: #45051e;
+  }
+
+  .md\:border-pink-darker {
+    border-color: #72173a;
+  }
+
+  .md\:border-pink-dark {
+    border-color: #eb5286;
+  }
+
+  .md\:border-pink {
+    border-color: #f66d9b;
+  }
+
+  .md\:border-pink-light {
+    border-color: #fa7ea8;
+  }
+
+  .md\:border-pink-lighter {
+    border-color: #ffbbca;
+  }
+
+  .md\:border-pink-lightest {
+    border-color: #ffebef;
+  }
+
   .md\:hover\:border-transparent:hover {
     border-color: transparent;
   }
 
-  .md\:border-black,
   .md\:hover\:border-black:hover {
     border-color: #222b2f;
   }
 
-  .md\:border-grey-darkest,
   .md\:hover\:border-grey-darkest:hover {
     border-color: #364349;
   }
 
-  .md\:border-grey-darker,
   .md\:hover\:border-grey-darker:hover {
     border-color: #596a73;
   }
 
-  .md\:border-grey-dark,
   .md\:hover\:border-grey-dark:hover {
     border-color: #70818a;
   }
 
-  .md\:border-grey,
   .md\:hover\:border-grey:hover {
     border-color: #9babb4;
   }
 
-  .md\:border-grey-light,
   .md\:hover\:border-grey-light:hover {
     border-color: #dae4e9;
   }
 
-  .md\:border-grey-lighter,
   .md\:hover\:border-grey-lighter:hover {
     border-color: #f3f7f9;
   }
 
-  .md\:border-grey-lightest,
   .md\:hover\:border-grey-lightest:hover {
     border-color: #fafcfc;
   }
 
-  .md\:border-white,
   .md\:hover\:border-white:hover {
     border-color: #ffffff;
   }
 
-  .md\:border-red-darkest,
   .md\:hover\:border-red-darkest:hover {
     border-color: #420806;
   }
 
-  .md\:border-red-darker,
   .md\:hover\:border-red-darker:hover {
     border-color: #6a1b19;
   }
 
-  .md\:border-red-dark,
   .md\:hover\:border-red-dark:hover {
     border-color: #cc1f1a;
   }
 
-  .md\:border-red,
   .md\:hover\:border-red:hover {
     border-color: #e3342f;
   }
 
-  .md\:border-red-light,
   .md\:hover\:border-red-light:hover {
     border-color: #ef5753;
   }
 
-  .md\:border-red-lighter,
   .md\:hover\:border-red-lighter:hover {
     border-color: #f9acaa;
   }
 
-  .md\:border-red-lightest,
   .md\:hover\:border-red-lightest:hover {
     border-color: #fcebea;
   }
 
-  .md\:border-orange-darkest,
   .md\:hover\:border-orange-darkest:hover {
     border-color: #542605;
   }
 
-  .md\:border-orange-darker,
   .md\:hover\:border-orange-darker:hover {
     border-color: #7f4012;
   }
 
-  .md\:border-orange-dark,
   .md\:hover\:border-orange-dark:hover {
     border-color: #de751f;
   }
 
-  .md\:border-orange,
   .md\:hover\:border-orange:hover {
     border-color: #f6993f;
   }
 
-  .md\:border-orange-light,
   .md\:hover\:border-orange-light:hover {
     border-color: #faad63;
   }
 
-  .md\:border-orange-lighter,
   .md\:hover\:border-orange-lighter:hover {
     border-color: #fcd9b6;
   }
 
-  .md\:border-orange-lightest,
   .md\:hover\:border-orange-lightest:hover {
     border-color: #fff5eb;
   }
 
-  .md\:border-yellow-darkest,
   .md\:hover\:border-yellow-darkest:hover {
     border-color: #453411;
   }
 
-  .md\:border-yellow-darker,
   .md\:hover\:border-yellow-darker:hover {
     border-color: #684f1d;
   }
 
-  .md\:border-yellow-dark,
   .md\:hover\:border-yellow-dark:hover {
     border-color: #f2d024;
   }
 
-  .md\:border-yellow,
   .md\:hover\:border-yellow:hover {
     border-color: #ffed4a;
   }
 
-  .md\:border-yellow-light,
   .md\:hover\:border-yellow-light:hover {
     border-color: #fff382;
   }
 
-  .md\:border-yellow-lighter,
   .md\:hover\:border-yellow-lighter:hover {
     border-color: #fff9c2;
   }
 
-  .md\:border-yellow-lightest,
   .md\:hover\:border-yellow-lightest:hover {
     border-color: #fcfbeb;
   }
 
-  .md\:border-green-darkest,
   .md\:hover\:border-green-darkest:hover {
     border-color: #032d19;
   }
 
-  .md\:border-green-darker,
   .md\:hover\:border-green-darker:hover {
     border-color: #0b4228;
   }
 
-  .md\:border-green-dark,
   .md\:hover\:border-green-dark:hover {
     border-color: #1f9d55;
   }
 
-  .md\:border-green,
   .md\:hover\:border-green:hover {
     border-color: #38c172;
   }
 
-  .md\:border-green-light,
   .md\:hover\:border-green-light:hover {
     border-color: #51d88a;
   }
 
-  .md\:border-green-lighter,
   .md\:hover\:border-green-lighter:hover {
     border-color: #a2f5bf;
   }
 
-  .md\:border-green-lightest,
   .md\:hover\:border-green-lightest:hover {
     border-color: #e3fcec;
   }
 
-  .md\:border-teal-darkest,
   .md\:hover\:border-teal-darkest:hover {
     border-color: #0d3331;
   }
 
-  .md\:border-teal-darker,
   .md\:hover\:border-teal-darker:hover {
     border-color: #174e4b;
   }
 
-  .md\:border-teal-dark,
   .md\:hover\:border-teal-dark:hover {
     border-color: #38a89d;
   }
 
-  .md\:border-teal,
   .md\:hover\:border-teal:hover {
     border-color: #4dc0b5;
   }
 
-  .md\:border-teal-light,
   .md\:hover\:border-teal-light:hover {
     border-color: #64d5ca;
   }
 
-  .md\:border-teal-lighter,
   .md\:hover\:border-teal-lighter:hover {
     border-color: #a0f0ed;
   }
 
-  .md\:border-teal-lightest,
   .md\:hover\:border-teal-lightest:hover {
     border-color: #e8fffe;
   }
 
-  .md\:border-blue-darkest,
   .md\:hover\:border-blue-darkest:hover {
     border-color: #05233b;
   }
 
-  .md\:border-blue-darker,
   .md\:hover\:border-blue-darker:hover {
     border-color: #103d60;
   }
 
-  .md\:border-blue-dark,
   .md\:hover\:border-blue-dark:hover {
     border-color: #2779bd;
   }
 
-  .md\:border-blue,
   .md\:hover\:border-blue:hover {
     border-color: #3490dc;
   }
 
-  .md\:border-blue-light,
   .md\:hover\:border-blue-light:hover {
     border-color: #6cb2eb;
   }
 
-  .md\:border-blue-lighter,
   .md\:hover\:border-blue-lighter:hover {
     border-color: #bcdefa;
   }
 
-  .md\:border-blue-lightest,
   .md\:hover\:border-blue-lightest:hover {
     border-color: #eff8ff;
   }
 
-  .md\:border-indigo-darkest,
   .md\:hover\:border-indigo-darkest:hover {
     border-color: #191e38;
   }
 
-  .md\:border-indigo-darker,
   .md\:hover\:border-indigo-darker:hover {
     border-color: #2f365f;
   }
 
-  .md\:border-indigo-dark,
   .md\:hover\:border-indigo-dark:hover {
     border-color: #5661b3;
   }
 
-  .md\:border-indigo,
   .md\:hover\:border-indigo:hover {
     border-color: #6574cd;
   }
 
-  .md\:border-indigo-light,
   .md\:hover\:border-indigo-light:hover {
     border-color: #7886d7;
   }
 
-  .md\:border-indigo-lighter,
   .md\:hover\:border-indigo-lighter:hover {
     border-color: #b2b7ff;
   }
 
-  .md\:border-indigo-lightest,
   .md\:hover\:border-indigo-lightest:hover {
     border-color: #e6e8ff;
   }
 
-  .md\:border-purple-darkest,
   .md\:hover\:border-purple-darkest:hover {
     border-color: #1f133f;
   }
 
-  .md\:border-purple-darker,
   .md\:hover\:border-purple-darker:hover {
     border-color: #352465;
   }
 
-  .md\:border-purple-dark,
   .md\:hover\:border-purple-dark:hover {
     border-color: #794acf;
   }
 
-  .md\:border-purple,
   .md\:hover\:border-purple:hover {
     border-color: #9561e2;
   }
 
-  .md\:border-purple-light,
   .md\:hover\:border-purple-light:hover {
     border-color: #a779e9;
   }
 
-  .md\:border-purple-lighter,
   .md\:hover\:border-purple-lighter:hover {
     border-color: #d6bbfc;
   }
 
-  .md\:border-purple-lightest,
   .md\:hover\:border-purple-lightest:hover {
     border-color: #f3ebff;
   }
 
-  .md\:border-pink-darkest,
   .md\:hover\:border-pink-darkest:hover {
     border-color: #45051e;
   }
 
-  .md\:border-pink-darker,
   .md\:hover\:border-pink-darker:hover {
     border-color: #72173a;
   }
 
-  .md\:border-pink-dark,
   .md\:hover\:border-pink-dark:hover {
     border-color: #eb5286;
   }
 
-  .md\:border-pink,
   .md\:hover\:border-pink:hover {
     border-color: #f66d9b;
   }
 
-  .md\:border-pink-light,
   .md\:hover\:border-pink-light:hover {
     border-color: #fa7ea8;
   }
 
-  .md\:border-pink-lighter,
   .md\:hover\:border-pink-lighter:hover {
     border-color: #ffbbca;
   }
 
-  .md\:border-pink-lightest,
   .md\:hover\:border-pink-lightest:hover {
     border-color: #ffebef;
   }
@@ -10009,47 +12166,74 @@ button,
     font-size: 3rem;
   }
 
-  .lg\:font-hairline,
+  .lg\:font-hairline {
+    font-weight: 100;
+  }
+
+  .lg\:font-thin {
+    font-weight: 200;
+  }
+
+  .lg\:font-light {
+    font-weight: 300;
+  }
+
+  .lg\:font-normal {
+    font-weight: 400;
+  }
+
+  .lg\:font-medium {
+    font-weight: 500;
+  }
+
+  .lg\:font-semibold {
+    font-weight: 600;
+  }
+
+  .lg\:font-bold {
+    font-weight: 700;
+  }
+
+  .lg\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .lg\:font-black {
+    font-weight: 900;
+  }
+
   .lg\:hover\:font-hairline:hover {
     font-weight: 100;
   }
 
-  .lg\:font-thin,
   .lg\:hover\:font-thin:hover {
     font-weight: 200;
   }
 
-  .lg\:font-light,
   .lg\:hover\:font-light:hover {
     font-weight: 300;
   }
 
-  .lg\:font-normal,
   .lg\:hover\:font-normal:hover {
     font-weight: 400;
   }
 
-  .lg\:font-medium,
   .lg\:hover\:font-medium:hover {
     font-weight: 500;
   }
 
-  .lg\:font-semibold,
   .lg\:hover\:font-semibold:hover {
     font-weight: 600;
   }
 
-  .lg\:font-bold,
   .lg\:hover\:font-bold:hover {
     font-weight: 700;
   }
 
-  .lg\:font-extrabold,
   .lg\:hover\:font-extrabold:hover {
     font-weight: 800;
   }
 
-  .lg\:font-black,
   .lg\:hover\:font-black:hover {
     font-weight: 900;
   }
@@ -10066,367 +12250,586 @@ button,
     font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   }
 
-  .lg\:text-transparent,
+  .lg\:text-transparent {
+    color: transparent;
+  }
+
+  .lg\:text-black {
+    color: #222b2f;
+  }
+
+  .lg\:text-grey-darkest {
+    color: #364349;
+  }
+
+  .lg\:text-grey-darker {
+    color: #596a73;
+  }
+
+  .lg\:text-grey-dark {
+    color: #70818a;
+  }
+
+  .lg\:text-grey {
+    color: #9babb4;
+  }
+
+  .lg\:text-grey-light {
+    color: #dae4e9;
+  }
+
+  .lg\:text-grey-lighter {
+    color: #f3f7f9;
+  }
+
+  .lg\:text-grey-lightest {
+    color: #fafcfc;
+  }
+
+  .lg\:text-white {
+    color: #ffffff;
+  }
+
+  .lg\:text-red-darkest {
+    color: #420806;
+  }
+
+  .lg\:text-red-darker {
+    color: #6a1b19;
+  }
+
+  .lg\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .lg\:text-red {
+    color: #e3342f;
+  }
+
+  .lg\:text-red-light {
+    color: #ef5753;
+  }
+
+  .lg\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .lg\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .lg\:text-orange-darkest {
+    color: #542605;
+  }
+
+  .lg\:text-orange-darker {
+    color: #7f4012;
+  }
+
+  .lg\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .lg\:text-orange {
+    color: #f6993f;
+  }
+
+  .lg\:text-orange-light {
+    color: #faad63;
+  }
+
+  .lg\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .lg\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .lg\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .lg\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .lg\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .lg\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .lg\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .lg\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .lg\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .lg\:text-green-darkest {
+    color: #032d19;
+  }
+
+  .lg\:text-green-darker {
+    color: #0b4228;
+  }
+
+  .lg\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .lg\:text-green {
+    color: #38c172;
+  }
+
+  .lg\:text-green-light {
+    color: #51d88a;
+  }
+
+  .lg\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .lg\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .lg\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .lg\:text-teal-darker {
+    color: #174e4b;
+  }
+
+  .lg\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .lg\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .lg\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .lg\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .lg\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .lg\:text-blue-darkest {
+    color: #05233b;
+  }
+
+  .lg\:text-blue-darker {
+    color: #103d60;
+  }
+
+  .lg\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .lg\:text-blue {
+    color: #3490dc;
+  }
+
+  .lg\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .lg\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .lg\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .lg\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .lg\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .lg\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .lg\:text-indigo {
+    color: #6574cd;
+  }
+
+  .lg\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .lg\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .lg\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .lg\:text-purple-darkest {
+    color: #1f133f;
+  }
+
+  .lg\:text-purple-darker {
+    color: #352465;
+  }
+
+  .lg\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .lg\:text-purple {
+    color: #9561e2;
+  }
+
+  .lg\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .lg\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .lg\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .lg\:text-pink-darkest {
+    color: #45051e;
+  }
+
+  .lg\:text-pink-darker {
+    color: #72173a;
+  }
+
+  .lg\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .lg\:text-pink {
+    color: #f66d9b;
+  }
+
+  .lg\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .lg\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .lg\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .lg\:hover\:text-transparent:hover {
     color: transparent;
   }
 
-  .lg\:text-black,
   .lg\:hover\:text-black:hover {
     color: #222b2f;
   }
 
-  .lg\:text-grey-darkest,
   .lg\:hover\:text-grey-darkest:hover {
     color: #364349;
   }
 
-  .lg\:text-grey-darker,
   .lg\:hover\:text-grey-darker:hover {
     color: #596a73;
   }
 
-  .lg\:text-grey-dark,
   .lg\:hover\:text-grey-dark:hover {
     color: #70818a;
   }
 
-  .lg\:text-grey,
   .lg\:hover\:text-grey:hover {
     color: #9babb4;
   }
 
-  .lg\:text-grey-light,
   .lg\:hover\:text-grey-light:hover {
     color: #dae4e9;
   }
 
-  .lg\:text-grey-lighter,
   .lg\:hover\:text-grey-lighter:hover {
     color: #f3f7f9;
   }
 
-  .lg\:text-grey-lightest,
   .lg\:hover\:text-grey-lightest:hover {
     color: #fafcfc;
   }
 
-  .lg\:text-white,
   .lg\:hover\:text-white:hover {
     color: #ffffff;
   }
 
-  .lg\:text-red-darkest,
   .lg\:hover\:text-red-darkest:hover {
     color: #420806;
   }
 
-  .lg\:text-red-darker,
   .lg\:hover\:text-red-darker:hover {
     color: #6a1b19;
   }
 
-  .lg\:text-red-dark,
   .lg\:hover\:text-red-dark:hover {
     color: #cc1f1a;
   }
 
-  .lg\:text-red,
   .lg\:hover\:text-red:hover {
     color: #e3342f;
   }
 
-  .lg\:text-red-light,
   .lg\:hover\:text-red-light:hover {
     color: #ef5753;
   }
 
-  .lg\:text-red-lighter,
   .lg\:hover\:text-red-lighter:hover {
     color: #f9acaa;
   }
 
-  .lg\:text-red-lightest,
   .lg\:hover\:text-red-lightest:hover {
     color: #fcebea;
   }
 
-  .lg\:text-orange-darkest,
   .lg\:hover\:text-orange-darkest:hover {
     color: #542605;
   }
 
-  .lg\:text-orange-darker,
   .lg\:hover\:text-orange-darker:hover {
     color: #7f4012;
   }
 
-  .lg\:text-orange-dark,
   .lg\:hover\:text-orange-dark:hover {
     color: #de751f;
   }
 
-  .lg\:text-orange,
   .lg\:hover\:text-orange:hover {
     color: #f6993f;
   }
 
-  .lg\:text-orange-light,
   .lg\:hover\:text-orange-light:hover {
     color: #faad63;
   }
 
-  .lg\:text-orange-lighter,
   .lg\:hover\:text-orange-lighter:hover {
     color: #fcd9b6;
   }
 
-  .lg\:text-orange-lightest,
   .lg\:hover\:text-orange-lightest:hover {
     color: #fff5eb;
   }
 
-  .lg\:text-yellow-darkest,
   .lg\:hover\:text-yellow-darkest:hover {
     color: #453411;
   }
 
-  .lg\:text-yellow-darker,
   .lg\:hover\:text-yellow-darker:hover {
     color: #684f1d;
   }
 
-  .lg\:text-yellow-dark,
   .lg\:hover\:text-yellow-dark:hover {
     color: #f2d024;
   }
 
-  .lg\:text-yellow,
   .lg\:hover\:text-yellow:hover {
     color: #ffed4a;
   }
 
-  .lg\:text-yellow-light,
   .lg\:hover\:text-yellow-light:hover {
     color: #fff382;
   }
 
-  .lg\:text-yellow-lighter,
   .lg\:hover\:text-yellow-lighter:hover {
     color: #fff9c2;
   }
 
-  .lg\:text-yellow-lightest,
   .lg\:hover\:text-yellow-lightest:hover {
     color: #fcfbeb;
   }
 
-  .lg\:text-green-darkest,
   .lg\:hover\:text-green-darkest:hover {
     color: #032d19;
   }
 
-  .lg\:text-green-darker,
   .lg\:hover\:text-green-darker:hover {
     color: #0b4228;
   }
 
-  .lg\:text-green-dark,
   .lg\:hover\:text-green-dark:hover {
     color: #1f9d55;
   }
 
-  .lg\:text-green,
   .lg\:hover\:text-green:hover {
     color: #38c172;
   }
 
-  .lg\:text-green-light,
   .lg\:hover\:text-green-light:hover {
     color: #51d88a;
   }
 
-  .lg\:text-green-lighter,
   .lg\:hover\:text-green-lighter:hover {
     color: #a2f5bf;
   }
 
-  .lg\:text-green-lightest,
   .lg\:hover\:text-green-lightest:hover {
     color: #e3fcec;
   }
 
-  .lg\:text-teal-darkest,
   .lg\:hover\:text-teal-darkest:hover {
     color: #0d3331;
   }
 
-  .lg\:text-teal-darker,
   .lg\:hover\:text-teal-darker:hover {
     color: #174e4b;
   }
 
-  .lg\:text-teal-dark,
   .lg\:hover\:text-teal-dark:hover {
     color: #38a89d;
   }
 
-  .lg\:text-teal,
   .lg\:hover\:text-teal:hover {
     color: #4dc0b5;
   }
 
-  .lg\:text-teal-light,
   .lg\:hover\:text-teal-light:hover {
     color: #64d5ca;
   }
 
-  .lg\:text-teal-lighter,
   .lg\:hover\:text-teal-lighter:hover {
     color: #a0f0ed;
   }
 
-  .lg\:text-teal-lightest,
   .lg\:hover\:text-teal-lightest:hover {
     color: #e8fffe;
   }
 
-  .lg\:text-blue-darkest,
   .lg\:hover\:text-blue-darkest:hover {
     color: #05233b;
   }
 
-  .lg\:text-blue-darker,
   .lg\:hover\:text-blue-darker:hover {
     color: #103d60;
   }
 
-  .lg\:text-blue-dark,
   .lg\:hover\:text-blue-dark:hover {
     color: #2779bd;
   }
 
-  .lg\:text-blue,
   .lg\:hover\:text-blue:hover {
     color: #3490dc;
   }
 
-  .lg\:text-blue-light,
   .lg\:hover\:text-blue-light:hover {
     color: #6cb2eb;
   }
 
-  .lg\:text-blue-lighter,
   .lg\:hover\:text-blue-lighter:hover {
     color: #bcdefa;
   }
 
-  .lg\:text-blue-lightest,
   .lg\:hover\:text-blue-lightest:hover {
     color: #eff8ff;
   }
 
-  .lg\:text-indigo-darkest,
   .lg\:hover\:text-indigo-darkest:hover {
     color: #191e38;
   }
 
-  .lg\:text-indigo-darker,
   .lg\:hover\:text-indigo-darker:hover {
     color: #2f365f;
   }
 
-  .lg\:text-indigo-dark,
   .lg\:hover\:text-indigo-dark:hover {
     color: #5661b3;
   }
 
-  .lg\:text-indigo,
   .lg\:hover\:text-indigo:hover {
     color: #6574cd;
   }
 
-  .lg\:text-indigo-light,
   .lg\:hover\:text-indigo-light:hover {
     color: #7886d7;
   }
 
-  .lg\:text-indigo-lighter,
   .lg\:hover\:text-indigo-lighter:hover {
     color: #b2b7ff;
   }
 
-  .lg\:text-indigo-lightest,
   .lg\:hover\:text-indigo-lightest:hover {
     color: #e6e8ff;
   }
 
-  .lg\:text-purple-darkest,
   .lg\:hover\:text-purple-darkest:hover {
     color: #1f133f;
   }
 
-  .lg\:text-purple-darker,
   .lg\:hover\:text-purple-darker:hover {
     color: #352465;
   }
 
-  .lg\:text-purple-dark,
   .lg\:hover\:text-purple-dark:hover {
     color: #794acf;
   }
 
-  .lg\:text-purple,
   .lg\:hover\:text-purple:hover {
     color: #9561e2;
   }
 
-  .lg\:text-purple-light,
   .lg\:hover\:text-purple-light:hover {
     color: #a779e9;
   }
 
-  .lg\:text-purple-lighter,
   .lg\:hover\:text-purple-lighter:hover {
     color: #d6bbfc;
   }
 
-  .lg\:text-purple-lightest,
   .lg\:hover\:text-purple-lightest:hover {
     color: #f3ebff;
   }
 
-  .lg\:text-pink-darkest,
   .lg\:hover\:text-pink-darkest:hover {
     color: #45051e;
   }
 
-  .lg\:text-pink-darker,
   .lg\:hover\:text-pink-darker:hover {
     color: #72173a;
   }
 
-  .lg\:text-pink-dark,
   .lg\:hover\:text-pink-dark:hover {
     color: #eb5286;
   }
 
-  .lg\:text-pink,
   .lg\:hover\:text-pink:hover {
     color: #f66d9b;
   }
 
-  .lg\:text-pink-light,
   .lg\:hover\:text-pink-light:hover {
     color: #fa7ea8;
   }
 
-  .lg\:text-pink-lighter,
   .lg\:hover\:text-pink-lighter:hover {
     color: #ffbbca;
   }
 
-  .lg\:text-pink-lightest,
   .lg\:hover\:text-pink-lightest:hover {
     color: #ffebef;
   }
@@ -10509,58 +12912,93 @@ button,
     white-space: nowrap;
   }
 
-  .lg\:italic,
+  .lg\:italic {
+    font-style: italic;
+  }
+
+  .lg\:roman {
+    font-style: normal;
+  }
+
+  .lg\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .lg\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .lg\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .lg\:normal-case {
+    text-transform: none;
+  }
+
+  .lg\:underline {
+    text-decoration: underline;
+  }
+
+  .lg\:line-through {
+    text-decoration: line-through;
+  }
+
+  .lg\:no-underline {
+    text-decoration: none;
+  }
+
+  .lg\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .lg\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
   .lg\:hover\:italic:hover {
     font-style: italic;
   }
 
-  .lg\:roman,
   .lg\:hover\:roman:hover {
     font-style: normal;
   }
 
-  .lg\:uppercase,
   .lg\:hover\:uppercase:hover {
     text-transform: uppercase;
   }
 
-  .lg\:lowercase,
   .lg\:hover\:lowercase:hover {
     text-transform: lowercase;
   }
 
-  .lg\:capitalize,
   .lg\:hover\:capitalize:hover {
     text-transform: capitalize;
   }
 
-  .lg\:normal-case,
   .lg\:hover\:normal-case:hover {
     text-transform: none;
   }
 
-  .lg\:underline,
   .lg\:hover\:underline:hover {
     text-decoration: underline;
   }
 
-  .lg\:line-through,
   .lg\:hover\:line-through:hover {
     text-decoration: line-through;
   }
 
-  .lg\:no-underline,
   .lg\:hover\:no-underline:hover {
     text-decoration: none;
   }
 
-  .lg\:antialiased,
   .lg\:hover\:antialiased:hover {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .lg\:subpixel-antialiased,
   .lg\:hover\:subpixel-antialiased:hover {
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
@@ -10590,367 +13028,586 @@ button,
     vertical-align: text-bottom;
   }
 
-  .lg\:bg-transparent,
+  .lg\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .lg\:bg-black {
+    background-color: #222b2f;
+  }
+
+  .lg\:bg-grey-darkest {
+    background-color: #364349;
+  }
+
+  .lg\:bg-grey-darker {
+    background-color: #596a73;
+  }
+
+  .lg\:bg-grey-dark {
+    background-color: #70818a;
+  }
+
+  .lg\:bg-grey {
+    background-color: #9babb4;
+  }
+
+  .lg\:bg-grey-light {
+    background-color: #dae4e9;
+  }
+
+  .lg\:bg-grey-lighter {
+    background-color: #f3f7f9;
+  }
+
+  .lg\:bg-grey-lightest {
+    background-color: #fafcfc;
+  }
+
+  .lg\:bg-white {
+    background-color: #ffffff;
+  }
+
+  .lg\:bg-red-darkest {
+    background-color: #420806;
+  }
+
+  .lg\:bg-red-darker {
+    background-color: #6a1b19;
+  }
+
+  .lg\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .lg\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .lg\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .lg\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .lg\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .lg\:bg-orange-darkest {
+    background-color: #542605;
+  }
+
+  .lg\:bg-orange-darker {
+    background-color: #7f4012;
+  }
+
+  .lg\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .lg\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .lg\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .lg\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .lg\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .lg\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .lg\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .lg\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .lg\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .lg\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .lg\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .lg\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .lg\:bg-green-darkest {
+    background-color: #032d19;
+  }
+
+  .lg\:bg-green-darker {
+    background-color: #0b4228;
+  }
+
+  .lg\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .lg\:bg-green {
+    background-color: #38c172;
+  }
+
+  .lg\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .lg\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .lg\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .lg\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .lg\:bg-teal-darker {
+    background-color: #174e4b;
+  }
+
+  .lg\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .lg\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .lg\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .lg\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .lg\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .lg\:bg-blue-darkest {
+    background-color: #05233b;
+  }
+
+  .lg\:bg-blue-darker {
+    background-color: #103d60;
+  }
+
+  .lg\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .lg\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .lg\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .lg\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .lg\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .lg\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .lg\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .lg\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .lg\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .lg\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .lg\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .lg\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .lg\:bg-purple-darkest {
+    background-color: #1f133f;
+  }
+
+  .lg\:bg-purple-darker {
+    background-color: #352465;
+  }
+
+  .lg\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .lg\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .lg\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .lg\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .lg\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .lg\:bg-pink-darkest {
+    background-color: #45051e;
+  }
+
+  .lg\:bg-pink-darker {
+    background-color: #72173a;
+  }
+
+  .lg\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .lg\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .lg\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .lg\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .lg\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .lg\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
 
-  .lg\:bg-black,
   .lg\:hover\:bg-black:hover {
     background-color: #222b2f;
   }
 
-  .lg\:bg-grey-darkest,
   .lg\:hover\:bg-grey-darkest:hover {
     background-color: #364349;
   }
 
-  .lg\:bg-grey-darker,
   .lg\:hover\:bg-grey-darker:hover {
     background-color: #596a73;
   }
 
-  .lg\:bg-grey-dark,
   .lg\:hover\:bg-grey-dark:hover {
     background-color: #70818a;
   }
 
-  .lg\:bg-grey,
   .lg\:hover\:bg-grey:hover {
     background-color: #9babb4;
   }
 
-  .lg\:bg-grey-light,
   .lg\:hover\:bg-grey-light:hover {
     background-color: #dae4e9;
   }
 
-  .lg\:bg-grey-lighter,
   .lg\:hover\:bg-grey-lighter:hover {
     background-color: #f3f7f9;
   }
 
-  .lg\:bg-grey-lightest,
   .lg\:hover\:bg-grey-lightest:hover {
     background-color: #fafcfc;
   }
 
-  .lg\:bg-white,
   .lg\:hover\:bg-white:hover {
     background-color: #ffffff;
   }
 
-  .lg\:bg-red-darkest,
   .lg\:hover\:bg-red-darkest:hover {
     background-color: #420806;
   }
 
-  .lg\:bg-red-darker,
   .lg\:hover\:bg-red-darker:hover {
     background-color: #6a1b19;
   }
 
-  .lg\:bg-red-dark,
   .lg\:hover\:bg-red-dark:hover {
     background-color: #cc1f1a;
   }
 
-  .lg\:bg-red,
   .lg\:hover\:bg-red:hover {
     background-color: #e3342f;
   }
 
-  .lg\:bg-red-light,
   .lg\:hover\:bg-red-light:hover {
     background-color: #ef5753;
   }
 
-  .lg\:bg-red-lighter,
   .lg\:hover\:bg-red-lighter:hover {
     background-color: #f9acaa;
   }
 
-  .lg\:bg-red-lightest,
   .lg\:hover\:bg-red-lightest:hover {
     background-color: #fcebea;
   }
 
-  .lg\:bg-orange-darkest,
   .lg\:hover\:bg-orange-darkest:hover {
     background-color: #542605;
   }
 
-  .lg\:bg-orange-darker,
   .lg\:hover\:bg-orange-darker:hover {
     background-color: #7f4012;
   }
 
-  .lg\:bg-orange-dark,
   .lg\:hover\:bg-orange-dark:hover {
     background-color: #de751f;
   }
 
-  .lg\:bg-orange,
   .lg\:hover\:bg-orange:hover {
     background-color: #f6993f;
   }
 
-  .lg\:bg-orange-light,
   .lg\:hover\:bg-orange-light:hover {
     background-color: #faad63;
   }
 
-  .lg\:bg-orange-lighter,
   .lg\:hover\:bg-orange-lighter:hover {
     background-color: #fcd9b6;
   }
 
-  .lg\:bg-orange-lightest,
   .lg\:hover\:bg-orange-lightest:hover {
     background-color: #fff5eb;
   }
 
-  .lg\:bg-yellow-darkest,
   .lg\:hover\:bg-yellow-darkest:hover {
     background-color: #453411;
   }
 
-  .lg\:bg-yellow-darker,
   .lg\:hover\:bg-yellow-darker:hover {
     background-color: #684f1d;
   }
 
-  .lg\:bg-yellow-dark,
   .lg\:hover\:bg-yellow-dark:hover {
     background-color: #f2d024;
   }
 
-  .lg\:bg-yellow,
   .lg\:hover\:bg-yellow:hover {
     background-color: #ffed4a;
   }
 
-  .lg\:bg-yellow-light,
   .lg\:hover\:bg-yellow-light:hover {
     background-color: #fff382;
   }
 
-  .lg\:bg-yellow-lighter,
   .lg\:hover\:bg-yellow-lighter:hover {
     background-color: #fff9c2;
   }
 
-  .lg\:bg-yellow-lightest,
   .lg\:hover\:bg-yellow-lightest:hover {
     background-color: #fcfbeb;
   }
 
-  .lg\:bg-green-darkest,
   .lg\:hover\:bg-green-darkest:hover {
     background-color: #032d19;
   }
 
-  .lg\:bg-green-darker,
   .lg\:hover\:bg-green-darker:hover {
     background-color: #0b4228;
   }
 
-  .lg\:bg-green-dark,
   .lg\:hover\:bg-green-dark:hover {
     background-color: #1f9d55;
   }
 
-  .lg\:bg-green,
   .lg\:hover\:bg-green:hover {
     background-color: #38c172;
   }
 
-  .lg\:bg-green-light,
   .lg\:hover\:bg-green-light:hover {
     background-color: #51d88a;
   }
 
-  .lg\:bg-green-lighter,
   .lg\:hover\:bg-green-lighter:hover {
     background-color: #a2f5bf;
   }
 
-  .lg\:bg-green-lightest,
   .lg\:hover\:bg-green-lightest:hover {
     background-color: #e3fcec;
   }
 
-  .lg\:bg-teal-darkest,
   .lg\:hover\:bg-teal-darkest:hover {
     background-color: #0d3331;
   }
 
-  .lg\:bg-teal-darker,
   .lg\:hover\:bg-teal-darker:hover {
     background-color: #174e4b;
   }
 
-  .lg\:bg-teal-dark,
   .lg\:hover\:bg-teal-dark:hover {
     background-color: #38a89d;
   }
 
-  .lg\:bg-teal,
   .lg\:hover\:bg-teal:hover {
     background-color: #4dc0b5;
   }
 
-  .lg\:bg-teal-light,
   .lg\:hover\:bg-teal-light:hover {
     background-color: #64d5ca;
   }
 
-  .lg\:bg-teal-lighter,
   .lg\:hover\:bg-teal-lighter:hover {
     background-color: #a0f0ed;
   }
 
-  .lg\:bg-teal-lightest,
   .lg\:hover\:bg-teal-lightest:hover {
     background-color: #e8fffe;
   }
 
-  .lg\:bg-blue-darkest,
   .lg\:hover\:bg-blue-darkest:hover {
     background-color: #05233b;
   }
 
-  .lg\:bg-blue-darker,
   .lg\:hover\:bg-blue-darker:hover {
     background-color: #103d60;
   }
 
-  .lg\:bg-blue-dark,
   .lg\:hover\:bg-blue-dark:hover {
     background-color: #2779bd;
   }
 
-  .lg\:bg-blue,
   .lg\:hover\:bg-blue:hover {
     background-color: #3490dc;
   }
 
-  .lg\:bg-blue-light,
   .lg\:hover\:bg-blue-light:hover {
     background-color: #6cb2eb;
   }
 
-  .lg\:bg-blue-lighter,
   .lg\:hover\:bg-blue-lighter:hover {
     background-color: #bcdefa;
   }
 
-  .lg\:bg-blue-lightest,
   .lg\:hover\:bg-blue-lightest:hover {
     background-color: #eff8ff;
   }
 
-  .lg\:bg-indigo-darkest,
   .lg\:hover\:bg-indigo-darkest:hover {
     background-color: #191e38;
   }
 
-  .lg\:bg-indigo-darker,
   .lg\:hover\:bg-indigo-darker:hover {
     background-color: #2f365f;
   }
 
-  .lg\:bg-indigo-dark,
   .lg\:hover\:bg-indigo-dark:hover {
     background-color: #5661b3;
   }
 
-  .lg\:bg-indigo,
   .lg\:hover\:bg-indigo:hover {
     background-color: #6574cd;
   }
 
-  .lg\:bg-indigo-light,
   .lg\:hover\:bg-indigo-light:hover {
     background-color: #7886d7;
   }
 
-  .lg\:bg-indigo-lighter,
   .lg\:hover\:bg-indigo-lighter:hover {
     background-color: #b2b7ff;
   }
 
-  .lg\:bg-indigo-lightest,
   .lg\:hover\:bg-indigo-lightest:hover {
     background-color: #e6e8ff;
   }
 
-  .lg\:bg-purple-darkest,
   .lg\:hover\:bg-purple-darkest:hover {
     background-color: #1f133f;
   }
 
-  .lg\:bg-purple-darker,
   .lg\:hover\:bg-purple-darker:hover {
     background-color: #352465;
   }
 
-  .lg\:bg-purple-dark,
   .lg\:hover\:bg-purple-dark:hover {
     background-color: #794acf;
   }
 
-  .lg\:bg-purple,
   .lg\:hover\:bg-purple:hover {
     background-color: #9561e2;
   }
 
-  .lg\:bg-purple-light,
   .lg\:hover\:bg-purple-light:hover {
     background-color: #a779e9;
   }
 
-  .lg\:bg-purple-lighter,
   .lg\:hover\:bg-purple-lighter:hover {
     background-color: #d6bbfc;
   }
 
-  .lg\:bg-purple-lightest,
   .lg\:hover\:bg-purple-lightest:hover {
     background-color: #f3ebff;
   }
 
-  .lg\:bg-pink-darkest,
   .lg\:hover\:bg-pink-darkest:hover {
     background-color: #45051e;
   }
 
-  .lg\:bg-pink-darker,
   .lg\:hover\:bg-pink-darker:hover {
     background-color: #72173a;
   }
 
-  .lg\:bg-pink-dark,
   .lg\:hover\:bg-pink-dark:hover {
     background-color: #eb5286;
   }
 
-  .lg\:bg-pink,
   .lg\:hover\:bg-pink:hover {
     background-color: #f66d9b;
   }
 
-  .lg\:bg-pink-light,
   .lg\:hover\:bg-pink-light:hover {
     background-color: #fa7ea8;
   }
 
-  .lg\:bg-pink-lighter,
   .lg\:hover\:bg-pink-lighter:hover {
     background-color: #ffbbca;
   }
 
-  .lg\:bg-pink-lightest,
   .lg\:hover\:bg-pink-lightest:hover {
     background-color: #ffebef;
   }
@@ -11099,367 +13756,586 @@ button,
     border-left-width: 1px;
   }
 
-  .lg\:border-transparent,
+  .lg\:border-transparent {
+    border-color: transparent;
+  }
+
+  .lg\:border-black {
+    border-color: #222b2f;
+  }
+
+  .lg\:border-grey-darkest {
+    border-color: #364349;
+  }
+
+  .lg\:border-grey-darker {
+    border-color: #596a73;
+  }
+
+  .lg\:border-grey-dark {
+    border-color: #70818a;
+  }
+
+  .lg\:border-grey {
+    border-color: #9babb4;
+  }
+
+  .lg\:border-grey-light {
+    border-color: #dae4e9;
+  }
+
+  .lg\:border-grey-lighter {
+    border-color: #f3f7f9;
+  }
+
+  .lg\:border-grey-lightest {
+    border-color: #fafcfc;
+  }
+
+  .lg\:border-white {
+    border-color: #ffffff;
+  }
+
+  .lg\:border-red-darkest {
+    border-color: #420806;
+  }
+
+  .lg\:border-red-darker {
+    border-color: #6a1b19;
+  }
+
+  .lg\:border-red-dark {
+    border-color: #cc1f1a;
+  }
+
+  .lg\:border-red {
+    border-color: #e3342f;
+  }
+
+  .lg\:border-red-light {
+    border-color: #ef5753;
+  }
+
+  .lg\:border-red-lighter {
+    border-color: #f9acaa;
+  }
+
+  .lg\:border-red-lightest {
+    border-color: #fcebea;
+  }
+
+  .lg\:border-orange-darkest {
+    border-color: #542605;
+  }
+
+  .lg\:border-orange-darker {
+    border-color: #7f4012;
+  }
+
+  .lg\:border-orange-dark {
+    border-color: #de751f;
+  }
+
+  .lg\:border-orange {
+    border-color: #f6993f;
+  }
+
+  .lg\:border-orange-light {
+    border-color: #faad63;
+  }
+
+  .lg\:border-orange-lighter {
+    border-color: #fcd9b6;
+  }
+
+  .lg\:border-orange-lightest {
+    border-color: #fff5eb;
+  }
+
+  .lg\:border-yellow-darkest {
+    border-color: #453411;
+  }
+
+  .lg\:border-yellow-darker {
+    border-color: #684f1d;
+  }
+
+  .lg\:border-yellow-dark {
+    border-color: #f2d024;
+  }
+
+  .lg\:border-yellow {
+    border-color: #ffed4a;
+  }
+
+  .lg\:border-yellow-light {
+    border-color: #fff382;
+  }
+
+  .lg\:border-yellow-lighter {
+    border-color: #fff9c2;
+  }
+
+  .lg\:border-yellow-lightest {
+    border-color: #fcfbeb;
+  }
+
+  .lg\:border-green-darkest {
+    border-color: #032d19;
+  }
+
+  .lg\:border-green-darker {
+    border-color: #0b4228;
+  }
+
+  .lg\:border-green-dark {
+    border-color: #1f9d55;
+  }
+
+  .lg\:border-green {
+    border-color: #38c172;
+  }
+
+  .lg\:border-green-light {
+    border-color: #51d88a;
+  }
+
+  .lg\:border-green-lighter {
+    border-color: #a2f5bf;
+  }
+
+  .lg\:border-green-lightest {
+    border-color: #e3fcec;
+  }
+
+  .lg\:border-teal-darkest {
+    border-color: #0d3331;
+  }
+
+  .lg\:border-teal-darker {
+    border-color: #174e4b;
+  }
+
+  .lg\:border-teal-dark {
+    border-color: #38a89d;
+  }
+
+  .lg\:border-teal {
+    border-color: #4dc0b5;
+  }
+
+  .lg\:border-teal-light {
+    border-color: #64d5ca;
+  }
+
+  .lg\:border-teal-lighter {
+    border-color: #a0f0ed;
+  }
+
+  .lg\:border-teal-lightest {
+    border-color: #e8fffe;
+  }
+
+  .lg\:border-blue-darkest {
+    border-color: #05233b;
+  }
+
+  .lg\:border-blue-darker {
+    border-color: #103d60;
+  }
+
+  .lg\:border-blue-dark {
+    border-color: #2779bd;
+  }
+
+  .lg\:border-blue {
+    border-color: #3490dc;
+  }
+
+  .lg\:border-blue-light {
+    border-color: #6cb2eb;
+  }
+
+  .lg\:border-blue-lighter {
+    border-color: #bcdefa;
+  }
+
+  .lg\:border-blue-lightest {
+    border-color: #eff8ff;
+  }
+
+  .lg\:border-indigo-darkest {
+    border-color: #191e38;
+  }
+
+  .lg\:border-indigo-darker {
+    border-color: #2f365f;
+  }
+
+  .lg\:border-indigo-dark {
+    border-color: #5661b3;
+  }
+
+  .lg\:border-indigo {
+    border-color: #6574cd;
+  }
+
+  .lg\:border-indigo-light {
+    border-color: #7886d7;
+  }
+
+  .lg\:border-indigo-lighter {
+    border-color: #b2b7ff;
+  }
+
+  .lg\:border-indigo-lightest {
+    border-color: #e6e8ff;
+  }
+
+  .lg\:border-purple-darkest {
+    border-color: #1f133f;
+  }
+
+  .lg\:border-purple-darker {
+    border-color: #352465;
+  }
+
+  .lg\:border-purple-dark {
+    border-color: #794acf;
+  }
+
+  .lg\:border-purple {
+    border-color: #9561e2;
+  }
+
+  .lg\:border-purple-light {
+    border-color: #a779e9;
+  }
+
+  .lg\:border-purple-lighter {
+    border-color: #d6bbfc;
+  }
+
+  .lg\:border-purple-lightest {
+    border-color: #f3ebff;
+  }
+
+  .lg\:border-pink-darkest {
+    border-color: #45051e;
+  }
+
+  .lg\:border-pink-darker {
+    border-color: #72173a;
+  }
+
+  .lg\:border-pink-dark {
+    border-color: #eb5286;
+  }
+
+  .lg\:border-pink {
+    border-color: #f66d9b;
+  }
+
+  .lg\:border-pink-light {
+    border-color: #fa7ea8;
+  }
+
+  .lg\:border-pink-lighter {
+    border-color: #ffbbca;
+  }
+
+  .lg\:border-pink-lightest {
+    border-color: #ffebef;
+  }
+
   .lg\:hover\:border-transparent:hover {
     border-color: transparent;
   }
 
-  .lg\:border-black,
   .lg\:hover\:border-black:hover {
     border-color: #222b2f;
   }
 
-  .lg\:border-grey-darkest,
   .lg\:hover\:border-grey-darkest:hover {
     border-color: #364349;
   }
 
-  .lg\:border-grey-darker,
   .lg\:hover\:border-grey-darker:hover {
     border-color: #596a73;
   }
 
-  .lg\:border-grey-dark,
   .lg\:hover\:border-grey-dark:hover {
     border-color: #70818a;
   }
 
-  .lg\:border-grey,
   .lg\:hover\:border-grey:hover {
     border-color: #9babb4;
   }
 
-  .lg\:border-grey-light,
   .lg\:hover\:border-grey-light:hover {
     border-color: #dae4e9;
   }
 
-  .lg\:border-grey-lighter,
   .lg\:hover\:border-grey-lighter:hover {
     border-color: #f3f7f9;
   }
 
-  .lg\:border-grey-lightest,
   .lg\:hover\:border-grey-lightest:hover {
     border-color: #fafcfc;
   }
 
-  .lg\:border-white,
   .lg\:hover\:border-white:hover {
     border-color: #ffffff;
   }
 
-  .lg\:border-red-darkest,
   .lg\:hover\:border-red-darkest:hover {
     border-color: #420806;
   }
 
-  .lg\:border-red-darker,
   .lg\:hover\:border-red-darker:hover {
     border-color: #6a1b19;
   }
 
-  .lg\:border-red-dark,
   .lg\:hover\:border-red-dark:hover {
     border-color: #cc1f1a;
   }
 
-  .lg\:border-red,
   .lg\:hover\:border-red:hover {
     border-color: #e3342f;
   }
 
-  .lg\:border-red-light,
   .lg\:hover\:border-red-light:hover {
     border-color: #ef5753;
   }
 
-  .lg\:border-red-lighter,
   .lg\:hover\:border-red-lighter:hover {
     border-color: #f9acaa;
   }
 
-  .lg\:border-red-lightest,
   .lg\:hover\:border-red-lightest:hover {
     border-color: #fcebea;
   }
 
-  .lg\:border-orange-darkest,
   .lg\:hover\:border-orange-darkest:hover {
     border-color: #542605;
   }
 
-  .lg\:border-orange-darker,
   .lg\:hover\:border-orange-darker:hover {
     border-color: #7f4012;
   }
 
-  .lg\:border-orange-dark,
   .lg\:hover\:border-orange-dark:hover {
     border-color: #de751f;
   }
 
-  .lg\:border-orange,
   .lg\:hover\:border-orange:hover {
     border-color: #f6993f;
   }
 
-  .lg\:border-orange-light,
   .lg\:hover\:border-orange-light:hover {
     border-color: #faad63;
   }
 
-  .lg\:border-orange-lighter,
   .lg\:hover\:border-orange-lighter:hover {
     border-color: #fcd9b6;
   }
 
-  .lg\:border-orange-lightest,
   .lg\:hover\:border-orange-lightest:hover {
     border-color: #fff5eb;
   }
 
-  .lg\:border-yellow-darkest,
   .lg\:hover\:border-yellow-darkest:hover {
     border-color: #453411;
   }
 
-  .lg\:border-yellow-darker,
   .lg\:hover\:border-yellow-darker:hover {
     border-color: #684f1d;
   }
 
-  .lg\:border-yellow-dark,
   .lg\:hover\:border-yellow-dark:hover {
     border-color: #f2d024;
   }
 
-  .lg\:border-yellow,
   .lg\:hover\:border-yellow:hover {
     border-color: #ffed4a;
   }
 
-  .lg\:border-yellow-light,
   .lg\:hover\:border-yellow-light:hover {
     border-color: #fff382;
   }
 
-  .lg\:border-yellow-lighter,
   .lg\:hover\:border-yellow-lighter:hover {
     border-color: #fff9c2;
   }
 
-  .lg\:border-yellow-lightest,
   .lg\:hover\:border-yellow-lightest:hover {
     border-color: #fcfbeb;
   }
 
-  .lg\:border-green-darkest,
   .lg\:hover\:border-green-darkest:hover {
     border-color: #032d19;
   }
 
-  .lg\:border-green-darker,
   .lg\:hover\:border-green-darker:hover {
     border-color: #0b4228;
   }
 
-  .lg\:border-green-dark,
   .lg\:hover\:border-green-dark:hover {
     border-color: #1f9d55;
   }
 
-  .lg\:border-green,
   .lg\:hover\:border-green:hover {
     border-color: #38c172;
   }
 
-  .lg\:border-green-light,
   .lg\:hover\:border-green-light:hover {
     border-color: #51d88a;
   }
 
-  .lg\:border-green-lighter,
   .lg\:hover\:border-green-lighter:hover {
     border-color: #a2f5bf;
   }
 
-  .lg\:border-green-lightest,
   .lg\:hover\:border-green-lightest:hover {
     border-color: #e3fcec;
   }
 
-  .lg\:border-teal-darkest,
   .lg\:hover\:border-teal-darkest:hover {
     border-color: #0d3331;
   }
 
-  .lg\:border-teal-darker,
   .lg\:hover\:border-teal-darker:hover {
     border-color: #174e4b;
   }
 
-  .lg\:border-teal-dark,
   .lg\:hover\:border-teal-dark:hover {
     border-color: #38a89d;
   }
 
-  .lg\:border-teal,
   .lg\:hover\:border-teal:hover {
     border-color: #4dc0b5;
   }
 
-  .lg\:border-teal-light,
   .lg\:hover\:border-teal-light:hover {
     border-color: #64d5ca;
   }
 
-  .lg\:border-teal-lighter,
   .lg\:hover\:border-teal-lighter:hover {
     border-color: #a0f0ed;
   }
 
-  .lg\:border-teal-lightest,
   .lg\:hover\:border-teal-lightest:hover {
     border-color: #e8fffe;
   }
 
-  .lg\:border-blue-darkest,
   .lg\:hover\:border-blue-darkest:hover {
     border-color: #05233b;
   }
 
-  .lg\:border-blue-darker,
   .lg\:hover\:border-blue-darker:hover {
     border-color: #103d60;
   }
 
-  .lg\:border-blue-dark,
   .lg\:hover\:border-blue-dark:hover {
     border-color: #2779bd;
   }
 
-  .lg\:border-blue,
   .lg\:hover\:border-blue:hover {
     border-color: #3490dc;
   }
 
-  .lg\:border-blue-light,
   .lg\:hover\:border-blue-light:hover {
     border-color: #6cb2eb;
   }
 
-  .lg\:border-blue-lighter,
   .lg\:hover\:border-blue-lighter:hover {
     border-color: #bcdefa;
   }
 
-  .lg\:border-blue-lightest,
   .lg\:hover\:border-blue-lightest:hover {
     border-color: #eff8ff;
   }
 
-  .lg\:border-indigo-darkest,
   .lg\:hover\:border-indigo-darkest:hover {
     border-color: #191e38;
   }
 
-  .lg\:border-indigo-darker,
   .lg\:hover\:border-indigo-darker:hover {
     border-color: #2f365f;
   }
 
-  .lg\:border-indigo-dark,
   .lg\:hover\:border-indigo-dark:hover {
     border-color: #5661b3;
   }
 
-  .lg\:border-indigo,
   .lg\:hover\:border-indigo:hover {
     border-color: #6574cd;
   }
 
-  .lg\:border-indigo-light,
   .lg\:hover\:border-indigo-light:hover {
     border-color: #7886d7;
   }
 
-  .lg\:border-indigo-lighter,
   .lg\:hover\:border-indigo-lighter:hover {
     border-color: #b2b7ff;
   }
 
-  .lg\:border-indigo-lightest,
   .lg\:hover\:border-indigo-lightest:hover {
     border-color: #e6e8ff;
   }
 
-  .lg\:border-purple-darkest,
   .lg\:hover\:border-purple-darkest:hover {
     border-color: #1f133f;
   }
 
-  .lg\:border-purple-darker,
   .lg\:hover\:border-purple-darker:hover {
     border-color: #352465;
   }
 
-  .lg\:border-purple-dark,
   .lg\:hover\:border-purple-dark:hover {
     border-color: #794acf;
   }
 
-  .lg\:border-purple,
   .lg\:hover\:border-purple:hover {
     border-color: #9561e2;
   }
 
-  .lg\:border-purple-light,
   .lg\:hover\:border-purple-light:hover {
     border-color: #a779e9;
   }
 
-  .lg\:border-purple-lighter,
   .lg\:hover\:border-purple-lighter:hover {
     border-color: #d6bbfc;
   }
 
-  .lg\:border-purple-lightest,
   .lg\:hover\:border-purple-lightest:hover {
     border-color: #f3ebff;
   }
 
-  .lg\:border-pink-darkest,
   .lg\:hover\:border-pink-darkest:hover {
     border-color: #45051e;
   }
 
-  .lg\:border-pink-darker,
   .lg\:hover\:border-pink-darker:hover {
     border-color: #72173a;
   }
 
-  .lg\:border-pink-dark,
   .lg\:hover\:border-pink-dark:hover {
     border-color: #eb5286;
   }
 
-  .lg\:border-pink,
   .lg\:hover\:border-pink:hover {
     border-color: #f66d9b;
   }
 
-  .lg\:border-pink-light,
   .lg\:hover\:border-pink-light:hover {
     border-color: #fa7ea8;
   }
 
-  .lg\:border-pink-lighter,
   .lg\:hover\:border-pink-lighter:hover {
     border-color: #ffbbca;
   }
 
-  .lg\:border-pink-lightest,
   .lg\:hover\:border-pink-lightest:hover {
     border-color: #ffebef;
   }
@@ -13130,47 +16006,74 @@ button,
     font-size: 3rem;
   }
 
-  .xl\:font-hairline,
+  .xl\:font-hairline {
+    font-weight: 100;
+  }
+
+  .xl\:font-thin {
+    font-weight: 200;
+  }
+
+  .xl\:font-light {
+    font-weight: 300;
+  }
+
+  .xl\:font-normal {
+    font-weight: 400;
+  }
+
+  .xl\:font-medium {
+    font-weight: 500;
+  }
+
+  .xl\:font-semibold {
+    font-weight: 600;
+  }
+
+  .xl\:font-bold {
+    font-weight: 700;
+  }
+
+  .xl\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .xl\:font-black {
+    font-weight: 900;
+  }
+
   .xl\:hover\:font-hairline:hover {
     font-weight: 100;
   }
 
-  .xl\:font-thin,
   .xl\:hover\:font-thin:hover {
     font-weight: 200;
   }
 
-  .xl\:font-light,
   .xl\:hover\:font-light:hover {
     font-weight: 300;
   }
 
-  .xl\:font-normal,
   .xl\:hover\:font-normal:hover {
     font-weight: 400;
   }
 
-  .xl\:font-medium,
   .xl\:hover\:font-medium:hover {
     font-weight: 500;
   }
 
-  .xl\:font-semibold,
   .xl\:hover\:font-semibold:hover {
     font-weight: 600;
   }
 
-  .xl\:font-bold,
   .xl\:hover\:font-bold:hover {
     font-weight: 700;
   }
 
-  .xl\:font-extrabold,
   .xl\:hover\:font-extrabold:hover {
     font-weight: 800;
   }
 
-  .xl\:font-black,
   .xl\:hover\:font-black:hover {
     font-weight: 900;
   }
@@ -13187,367 +16090,586 @@ button,
     font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   }
 
-  .xl\:text-transparent,
+  .xl\:text-transparent {
+    color: transparent;
+  }
+
+  .xl\:text-black {
+    color: #222b2f;
+  }
+
+  .xl\:text-grey-darkest {
+    color: #364349;
+  }
+
+  .xl\:text-grey-darker {
+    color: #596a73;
+  }
+
+  .xl\:text-grey-dark {
+    color: #70818a;
+  }
+
+  .xl\:text-grey {
+    color: #9babb4;
+  }
+
+  .xl\:text-grey-light {
+    color: #dae4e9;
+  }
+
+  .xl\:text-grey-lighter {
+    color: #f3f7f9;
+  }
+
+  .xl\:text-grey-lightest {
+    color: #fafcfc;
+  }
+
+  .xl\:text-white {
+    color: #ffffff;
+  }
+
+  .xl\:text-red-darkest {
+    color: #420806;
+  }
+
+  .xl\:text-red-darker {
+    color: #6a1b19;
+  }
+
+  .xl\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .xl\:text-red {
+    color: #e3342f;
+  }
+
+  .xl\:text-red-light {
+    color: #ef5753;
+  }
+
+  .xl\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .xl\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .xl\:text-orange-darkest {
+    color: #542605;
+  }
+
+  .xl\:text-orange-darker {
+    color: #7f4012;
+  }
+
+  .xl\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .xl\:text-orange {
+    color: #f6993f;
+  }
+
+  .xl\:text-orange-light {
+    color: #faad63;
+  }
+
+  .xl\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .xl\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .xl\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .xl\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .xl\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .xl\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .xl\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .xl\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .xl\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .xl\:text-green-darkest {
+    color: #032d19;
+  }
+
+  .xl\:text-green-darker {
+    color: #0b4228;
+  }
+
+  .xl\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .xl\:text-green {
+    color: #38c172;
+  }
+
+  .xl\:text-green-light {
+    color: #51d88a;
+  }
+
+  .xl\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .xl\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .xl\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .xl\:text-teal-darker {
+    color: #174e4b;
+  }
+
+  .xl\:text-teal-dark {
+    color: #38a89d;
+  }
+
+  .xl\:text-teal {
+    color: #4dc0b5;
+  }
+
+  .xl\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .xl\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .xl\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .xl\:text-blue-darkest {
+    color: #05233b;
+  }
+
+  .xl\:text-blue-darker {
+    color: #103d60;
+  }
+
+  .xl\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .xl\:text-blue {
+    color: #3490dc;
+  }
+
+  .xl\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .xl\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .xl\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .xl\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .xl\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .xl\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .xl\:text-indigo {
+    color: #6574cd;
+  }
+
+  .xl\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .xl\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .xl\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .xl\:text-purple-darkest {
+    color: #1f133f;
+  }
+
+  .xl\:text-purple-darker {
+    color: #352465;
+  }
+
+  .xl\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .xl\:text-purple {
+    color: #9561e2;
+  }
+
+  .xl\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .xl\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .xl\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .xl\:text-pink-darkest {
+    color: #45051e;
+  }
+
+  .xl\:text-pink-darker {
+    color: #72173a;
+  }
+
+  .xl\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .xl\:text-pink {
+    color: #f66d9b;
+  }
+
+  .xl\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .xl\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .xl\:text-pink-lightest {
+    color: #ffebef;
+  }
+
   .xl\:hover\:text-transparent:hover {
     color: transparent;
   }
 
-  .xl\:text-black,
   .xl\:hover\:text-black:hover {
     color: #222b2f;
   }
 
-  .xl\:text-grey-darkest,
   .xl\:hover\:text-grey-darkest:hover {
     color: #364349;
   }
 
-  .xl\:text-grey-darker,
   .xl\:hover\:text-grey-darker:hover {
     color: #596a73;
   }
 
-  .xl\:text-grey-dark,
   .xl\:hover\:text-grey-dark:hover {
     color: #70818a;
   }
 
-  .xl\:text-grey,
   .xl\:hover\:text-grey:hover {
     color: #9babb4;
   }
 
-  .xl\:text-grey-light,
   .xl\:hover\:text-grey-light:hover {
     color: #dae4e9;
   }
 
-  .xl\:text-grey-lighter,
   .xl\:hover\:text-grey-lighter:hover {
     color: #f3f7f9;
   }
 
-  .xl\:text-grey-lightest,
   .xl\:hover\:text-grey-lightest:hover {
     color: #fafcfc;
   }
 
-  .xl\:text-white,
   .xl\:hover\:text-white:hover {
     color: #ffffff;
   }
 
-  .xl\:text-red-darkest,
   .xl\:hover\:text-red-darkest:hover {
     color: #420806;
   }
 
-  .xl\:text-red-darker,
   .xl\:hover\:text-red-darker:hover {
     color: #6a1b19;
   }
 
-  .xl\:text-red-dark,
   .xl\:hover\:text-red-dark:hover {
     color: #cc1f1a;
   }
 
-  .xl\:text-red,
   .xl\:hover\:text-red:hover {
     color: #e3342f;
   }
 
-  .xl\:text-red-light,
   .xl\:hover\:text-red-light:hover {
     color: #ef5753;
   }
 
-  .xl\:text-red-lighter,
   .xl\:hover\:text-red-lighter:hover {
     color: #f9acaa;
   }
 
-  .xl\:text-red-lightest,
   .xl\:hover\:text-red-lightest:hover {
     color: #fcebea;
   }
 
-  .xl\:text-orange-darkest,
   .xl\:hover\:text-orange-darkest:hover {
     color: #542605;
   }
 
-  .xl\:text-orange-darker,
   .xl\:hover\:text-orange-darker:hover {
     color: #7f4012;
   }
 
-  .xl\:text-orange-dark,
   .xl\:hover\:text-orange-dark:hover {
     color: #de751f;
   }
 
-  .xl\:text-orange,
   .xl\:hover\:text-orange:hover {
     color: #f6993f;
   }
 
-  .xl\:text-orange-light,
   .xl\:hover\:text-orange-light:hover {
     color: #faad63;
   }
 
-  .xl\:text-orange-lighter,
   .xl\:hover\:text-orange-lighter:hover {
     color: #fcd9b6;
   }
 
-  .xl\:text-orange-lightest,
   .xl\:hover\:text-orange-lightest:hover {
     color: #fff5eb;
   }
 
-  .xl\:text-yellow-darkest,
   .xl\:hover\:text-yellow-darkest:hover {
     color: #453411;
   }
 
-  .xl\:text-yellow-darker,
   .xl\:hover\:text-yellow-darker:hover {
     color: #684f1d;
   }
 
-  .xl\:text-yellow-dark,
   .xl\:hover\:text-yellow-dark:hover {
     color: #f2d024;
   }
 
-  .xl\:text-yellow,
   .xl\:hover\:text-yellow:hover {
     color: #ffed4a;
   }
 
-  .xl\:text-yellow-light,
   .xl\:hover\:text-yellow-light:hover {
     color: #fff382;
   }
 
-  .xl\:text-yellow-lighter,
   .xl\:hover\:text-yellow-lighter:hover {
     color: #fff9c2;
   }
 
-  .xl\:text-yellow-lightest,
   .xl\:hover\:text-yellow-lightest:hover {
     color: #fcfbeb;
   }
 
-  .xl\:text-green-darkest,
   .xl\:hover\:text-green-darkest:hover {
     color: #032d19;
   }
 
-  .xl\:text-green-darker,
   .xl\:hover\:text-green-darker:hover {
     color: #0b4228;
   }
 
-  .xl\:text-green-dark,
   .xl\:hover\:text-green-dark:hover {
     color: #1f9d55;
   }
 
-  .xl\:text-green,
   .xl\:hover\:text-green:hover {
     color: #38c172;
   }
 
-  .xl\:text-green-light,
   .xl\:hover\:text-green-light:hover {
     color: #51d88a;
   }
 
-  .xl\:text-green-lighter,
   .xl\:hover\:text-green-lighter:hover {
     color: #a2f5bf;
   }
 
-  .xl\:text-green-lightest,
   .xl\:hover\:text-green-lightest:hover {
     color: #e3fcec;
   }
 
-  .xl\:text-teal-darkest,
   .xl\:hover\:text-teal-darkest:hover {
     color: #0d3331;
   }
 
-  .xl\:text-teal-darker,
   .xl\:hover\:text-teal-darker:hover {
     color: #174e4b;
   }
 
-  .xl\:text-teal-dark,
   .xl\:hover\:text-teal-dark:hover {
     color: #38a89d;
   }
 
-  .xl\:text-teal,
   .xl\:hover\:text-teal:hover {
     color: #4dc0b5;
   }
 
-  .xl\:text-teal-light,
   .xl\:hover\:text-teal-light:hover {
     color: #64d5ca;
   }
 
-  .xl\:text-teal-lighter,
   .xl\:hover\:text-teal-lighter:hover {
     color: #a0f0ed;
   }
 
-  .xl\:text-teal-lightest,
   .xl\:hover\:text-teal-lightest:hover {
     color: #e8fffe;
   }
 
-  .xl\:text-blue-darkest,
   .xl\:hover\:text-blue-darkest:hover {
     color: #05233b;
   }
 
-  .xl\:text-blue-darker,
   .xl\:hover\:text-blue-darker:hover {
     color: #103d60;
   }
 
-  .xl\:text-blue-dark,
   .xl\:hover\:text-blue-dark:hover {
     color: #2779bd;
   }
 
-  .xl\:text-blue,
   .xl\:hover\:text-blue:hover {
     color: #3490dc;
   }
 
-  .xl\:text-blue-light,
   .xl\:hover\:text-blue-light:hover {
     color: #6cb2eb;
   }
 
-  .xl\:text-blue-lighter,
   .xl\:hover\:text-blue-lighter:hover {
     color: #bcdefa;
   }
 
-  .xl\:text-blue-lightest,
   .xl\:hover\:text-blue-lightest:hover {
     color: #eff8ff;
   }
 
-  .xl\:text-indigo-darkest,
   .xl\:hover\:text-indigo-darkest:hover {
     color: #191e38;
   }
 
-  .xl\:text-indigo-darker,
   .xl\:hover\:text-indigo-darker:hover {
     color: #2f365f;
   }
 
-  .xl\:text-indigo-dark,
   .xl\:hover\:text-indigo-dark:hover {
     color: #5661b3;
   }
 
-  .xl\:text-indigo,
   .xl\:hover\:text-indigo:hover {
     color: #6574cd;
   }
 
-  .xl\:text-indigo-light,
   .xl\:hover\:text-indigo-light:hover {
     color: #7886d7;
   }
 
-  .xl\:text-indigo-lighter,
   .xl\:hover\:text-indigo-lighter:hover {
     color: #b2b7ff;
   }
 
-  .xl\:text-indigo-lightest,
   .xl\:hover\:text-indigo-lightest:hover {
     color: #e6e8ff;
   }
 
-  .xl\:text-purple-darkest,
   .xl\:hover\:text-purple-darkest:hover {
     color: #1f133f;
   }
 
-  .xl\:text-purple-darker,
   .xl\:hover\:text-purple-darker:hover {
     color: #352465;
   }
 
-  .xl\:text-purple-dark,
   .xl\:hover\:text-purple-dark:hover {
     color: #794acf;
   }
 
-  .xl\:text-purple,
   .xl\:hover\:text-purple:hover {
     color: #9561e2;
   }
 
-  .xl\:text-purple-light,
   .xl\:hover\:text-purple-light:hover {
     color: #a779e9;
   }
 
-  .xl\:text-purple-lighter,
   .xl\:hover\:text-purple-lighter:hover {
     color: #d6bbfc;
   }
 
-  .xl\:text-purple-lightest,
   .xl\:hover\:text-purple-lightest:hover {
     color: #f3ebff;
   }
 
-  .xl\:text-pink-darkest,
   .xl\:hover\:text-pink-darkest:hover {
     color: #45051e;
   }
 
-  .xl\:text-pink-darker,
   .xl\:hover\:text-pink-darker:hover {
     color: #72173a;
   }
 
-  .xl\:text-pink-dark,
   .xl\:hover\:text-pink-dark:hover {
     color: #eb5286;
   }
 
-  .xl\:text-pink,
   .xl\:hover\:text-pink:hover {
     color: #f66d9b;
   }
 
-  .xl\:text-pink-light,
   .xl\:hover\:text-pink-light:hover {
     color: #fa7ea8;
   }
 
-  .xl\:text-pink-lighter,
   .xl\:hover\:text-pink-lighter:hover {
     color: #ffbbca;
   }
 
-  .xl\:text-pink-lightest,
   .xl\:hover\:text-pink-lightest:hover {
     color: #ffebef;
   }
@@ -13630,58 +16752,93 @@ button,
     white-space: nowrap;
   }
 
-  .xl\:italic,
+  .xl\:italic {
+    font-style: italic;
+  }
+
+  .xl\:roman {
+    font-style: normal;
+  }
+
+  .xl\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .xl\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .xl\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .xl\:normal-case {
+    text-transform: none;
+  }
+
+  .xl\:underline {
+    text-decoration: underline;
+  }
+
+  .xl\:line-through {
+    text-decoration: line-through;
+  }
+
+  .xl\:no-underline {
+    text-decoration: none;
+  }
+
+  .xl\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .xl\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
   .xl\:hover\:italic:hover {
     font-style: italic;
   }
 
-  .xl\:roman,
   .xl\:hover\:roman:hover {
     font-style: normal;
   }
 
-  .xl\:uppercase,
   .xl\:hover\:uppercase:hover {
     text-transform: uppercase;
   }
 
-  .xl\:lowercase,
   .xl\:hover\:lowercase:hover {
     text-transform: lowercase;
   }
 
-  .xl\:capitalize,
   .xl\:hover\:capitalize:hover {
     text-transform: capitalize;
   }
 
-  .xl\:normal-case,
   .xl\:hover\:normal-case:hover {
     text-transform: none;
   }
 
-  .xl\:underline,
   .xl\:hover\:underline:hover {
     text-decoration: underline;
   }
 
-  .xl\:line-through,
   .xl\:hover\:line-through:hover {
     text-decoration: line-through;
   }
 
-  .xl\:no-underline,
   .xl\:hover\:no-underline:hover {
     text-decoration: none;
   }
 
-  .xl\:antialiased,
   .xl\:hover\:antialiased:hover {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .xl\:subpixel-antialiased,
   .xl\:hover\:subpixel-antialiased:hover {
     -webkit-font-smoothing: auto;
     -moz-osx-font-smoothing: auto;
@@ -13711,367 +16868,586 @@ button,
     vertical-align: text-bottom;
   }
 
-  .xl\:bg-transparent,
+  .xl\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .xl\:bg-black {
+    background-color: #222b2f;
+  }
+
+  .xl\:bg-grey-darkest {
+    background-color: #364349;
+  }
+
+  .xl\:bg-grey-darker {
+    background-color: #596a73;
+  }
+
+  .xl\:bg-grey-dark {
+    background-color: #70818a;
+  }
+
+  .xl\:bg-grey {
+    background-color: #9babb4;
+  }
+
+  .xl\:bg-grey-light {
+    background-color: #dae4e9;
+  }
+
+  .xl\:bg-grey-lighter {
+    background-color: #f3f7f9;
+  }
+
+  .xl\:bg-grey-lightest {
+    background-color: #fafcfc;
+  }
+
+  .xl\:bg-white {
+    background-color: #ffffff;
+  }
+
+  .xl\:bg-red-darkest {
+    background-color: #420806;
+  }
+
+  .xl\:bg-red-darker {
+    background-color: #6a1b19;
+  }
+
+  .xl\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .xl\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .xl\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .xl\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .xl\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .xl\:bg-orange-darkest {
+    background-color: #542605;
+  }
+
+  .xl\:bg-orange-darker {
+    background-color: #7f4012;
+  }
+
+  .xl\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .xl\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .xl\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .xl\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .xl\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .xl\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .xl\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .xl\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .xl\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .xl\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .xl\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .xl\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .xl\:bg-green-darkest {
+    background-color: #032d19;
+  }
+
+  .xl\:bg-green-darker {
+    background-color: #0b4228;
+  }
+
+  .xl\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .xl\:bg-green {
+    background-color: #38c172;
+  }
+
+  .xl\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .xl\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .xl\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .xl\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .xl\:bg-teal-darker {
+    background-color: #174e4b;
+  }
+
+  .xl\:bg-teal-dark {
+    background-color: #38a89d;
+  }
+
+  .xl\:bg-teal {
+    background-color: #4dc0b5;
+  }
+
+  .xl\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .xl\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .xl\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .xl\:bg-blue-darkest {
+    background-color: #05233b;
+  }
+
+  .xl\:bg-blue-darker {
+    background-color: #103d60;
+  }
+
+  .xl\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .xl\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .xl\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .xl\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .xl\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .xl\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .xl\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .xl\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .xl\:bg-indigo {
+    background-color: #6574cd;
+  }
+
+  .xl\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .xl\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .xl\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .xl\:bg-purple-darkest {
+    background-color: #1f133f;
+  }
+
+  .xl\:bg-purple-darker {
+    background-color: #352465;
+  }
+
+  .xl\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .xl\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .xl\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .xl\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .xl\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .xl\:bg-pink-darkest {
+    background-color: #45051e;
+  }
+
+  .xl\:bg-pink-darker {
+    background-color: #72173a;
+  }
+
+  .xl\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .xl\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .xl\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .xl\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .xl\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
   .xl\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
 
-  .xl\:bg-black,
   .xl\:hover\:bg-black:hover {
     background-color: #222b2f;
   }
 
-  .xl\:bg-grey-darkest,
   .xl\:hover\:bg-grey-darkest:hover {
     background-color: #364349;
   }
 
-  .xl\:bg-grey-darker,
   .xl\:hover\:bg-grey-darker:hover {
     background-color: #596a73;
   }
 
-  .xl\:bg-grey-dark,
   .xl\:hover\:bg-grey-dark:hover {
     background-color: #70818a;
   }
 
-  .xl\:bg-grey,
   .xl\:hover\:bg-grey:hover {
     background-color: #9babb4;
   }
 
-  .xl\:bg-grey-light,
   .xl\:hover\:bg-grey-light:hover {
     background-color: #dae4e9;
   }
 
-  .xl\:bg-grey-lighter,
   .xl\:hover\:bg-grey-lighter:hover {
     background-color: #f3f7f9;
   }
 
-  .xl\:bg-grey-lightest,
   .xl\:hover\:bg-grey-lightest:hover {
     background-color: #fafcfc;
   }
 
-  .xl\:bg-white,
   .xl\:hover\:bg-white:hover {
     background-color: #ffffff;
   }
 
-  .xl\:bg-red-darkest,
   .xl\:hover\:bg-red-darkest:hover {
     background-color: #420806;
   }
 
-  .xl\:bg-red-darker,
   .xl\:hover\:bg-red-darker:hover {
     background-color: #6a1b19;
   }
 
-  .xl\:bg-red-dark,
   .xl\:hover\:bg-red-dark:hover {
     background-color: #cc1f1a;
   }
 
-  .xl\:bg-red,
   .xl\:hover\:bg-red:hover {
     background-color: #e3342f;
   }
 
-  .xl\:bg-red-light,
   .xl\:hover\:bg-red-light:hover {
     background-color: #ef5753;
   }
 
-  .xl\:bg-red-lighter,
   .xl\:hover\:bg-red-lighter:hover {
     background-color: #f9acaa;
   }
 
-  .xl\:bg-red-lightest,
   .xl\:hover\:bg-red-lightest:hover {
     background-color: #fcebea;
   }
 
-  .xl\:bg-orange-darkest,
   .xl\:hover\:bg-orange-darkest:hover {
     background-color: #542605;
   }
 
-  .xl\:bg-orange-darker,
   .xl\:hover\:bg-orange-darker:hover {
     background-color: #7f4012;
   }
 
-  .xl\:bg-orange-dark,
   .xl\:hover\:bg-orange-dark:hover {
     background-color: #de751f;
   }
 
-  .xl\:bg-orange,
   .xl\:hover\:bg-orange:hover {
     background-color: #f6993f;
   }
 
-  .xl\:bg-orange-light,
   .xl\:hover\:bg-orange-light:hover {
     background-color: #faad63;
   }
 
-  .xl\:bg-orange-lighter,
   .xl\:hover\:bg-orange-lighter:hover {
     background-color: #fcd9b6;
   }
 
-  .xl\:bg-orange-lightest,
   .xl\:hover\:bg-orange-lightest:hover {
     background-color: #fff5eb;
   }
 
-  .xl\:bg-yellow-darkest,
   .xl\:hover\:bg-yellow-darkest:hover {
     background-color: #453411;
   }
 
-  .xl\:bg-yellow-darker,
   .xl\:hover\:bg-yellow-darker:hover {
     background-color: #684f1d;
   }
 
-  .xl\:bg-yellow-dark,
   .xl\:hover\:bg-yellow-dark:hover {
     background-color: #f2d024;
   }
 
-  .xl\:bg-yellow,
   .xl\:hover\:bg-yellow:hover {
     background-color: #ffed4a;
   }
 
-  .xl\:bg-yellow-light,
   .xl\:hover\:bg-yellow-light:hover {
     background-color: #fff382;
   }
 
-  .xl\:bg-yellow-lighter,
   .xl\:hover\:bg-yellow-lighter:hover {
     background-color: #fff9c2;
   }
 
-  .xl\:bg-yellow-lightest,
   .xl\:hover\:bg-yellow-lightest:hover {
     background-color: #fcfbeb;
   }
 
-  .xl\:bg-green-darkest,
   .xl\:hover\:bg-green-darkest:hover {
     background-color: #032d19;
   }
 
-  .xl\:bg-green-darker,
   .xl\:hover\:bg-green-darker:hover {
     background-color: #0b4228;
   }
 
-  .xl\:bg-green-dark,
   .xl\:hover\:bg-green-dark:hover {
     background-color: #1f9d55;
   }
 
-  .xl\:bg-green,
   .xl\:hover\:bg-green:hover {
     background-color: #38c172;
   }
 
-  .xl\:bg-green-light,
   .xl\:hover\:bg-green-light:hover {
     background-color: #51d88a;
   }
 
-  .xl\:bg-green-lighter,
   .xl\:hover\:bg-green-lighter:hover {
     background-color: #a2f5bf;
   }
 
-  .xl\:bg-green-lightest,
   .xl\:hover\:bg-green-lightest:hover {
     background-color: #e3fcec;
   }
 
-  .xl\:bg-teal-darkest,
   .xl\:hover\:bg-teal-darkest:hover {
     background-color: #0d3331;
   }
 
-  .xl\:bg-teal-darker,
   .xl\:hover\:bg-teal-darker:hover {
     background-color: #174e4b;
   }
 
-  .xl\:bg-teal-dark,
   .xl\:hover\:bg-teal-dark:hover {
     background-color: #38a89d;
   }
 
-  .xl\:bg-teal,
   .xl\:hover\:bg-teal:hover {
     background-color: #4dc0b5;
   }
 
-  .xl\:bg-teal-light,
   .xl\:hover\:bg-teal-light:hover {
     background-color: #64d5ca;
   }
 
-  .xl\:bg-teal-lighter,
   .xl\:hover\:bg-teal-lighter:hover {
     background-color: #a0f0ed;
   }
 
-  .xl\:bg-teal-lightest,
   .xl\:hover\:bg-teal-lightest:hover {
     background-color: #e8fffe;
   }
 
-  .xl\:bg-blue-darkest,
   .xl\:hover\:bg-blue-darkest:hover {
     background-color: #05233b;
   }
 
-  .xl\:bg-blue-darker,
   .xl\:hover\:bg-blue-darker:hover {
     background-color: #103d60;
   }
 
-  .xl\:bg-blue-dark,
   .xl\:hover\:bg-blue-dark:hover {
     background-color: #2779bd;
   }
 
-  .xl\:bg-blue,
   .xl\:hover\:bg-blue:hover {
     background-color: #3490dc;
   }
 
-  .xl\:bg-blue-light,
   .xl\:hover\:bg-blue-light:hover {
     background-color: #6cb2eb;
   }
 
-  .xl\:bg-blue-lighter,
   .xl\:hover\:bg-blue-lighter:hover {
     background-color: #bcdefa;
   }
 
-  .xl\:bg-blue-lightest,
   .xl\:hover\:bg-blue-lightest:hover {
     background-color: #eff8ff;
   }
 
-  .xl\:bg-indigo-darkest,
   .xl\:hover\:bg-indigo-darkest:hover {
     background-color: #191e38;
   }
 
-  .xl\:bg-indigo-darker,
   .xl\:hover\:bg-indigo-darker:hover {
     background-color: #2f365f;
   }
 
-  .xl\:bg-indigo-dark,
   .xl\:hover\:bg-indigo-dark:hover {
     background-color: #5661b3;
   }
 
-  .xl\:bg-indigo,
   .xl\:hover\:bg-indigo:hover {
     background-color: #6574cd;
   }
 
-  .xl\:bg-indigo-light,
   .xl\:hover\:bg-indigo-light:hover {
     background-color: #7886d7;
   }
 
-  .xl\:bg-indigo-lighter,
   .xl\:hover\:bg-indigo-lighter:hover {
     background-color: #b2b7ff;
   }
 
-  .xl\:bg-indigo-lightest,
   .xl\:hover\:bg-indigo-lightest:hover {
     background-color: #e6e8ff;
   }
 
-  .xl\:bg-purple-darkest,
   .xl\:hover\:bg-purple-darkest:hover {
     background-color: #1f133f;
   }
 
-  .xl\:bg-purple-darker,
   .xl\:hover\:bg-purple-darker:hover {
     background-color: #352465;
   }
 
-  .xl\:bg-purple-dark,
   .xl\:hover\:bg-purple-dark:hover {
     background-color: #794acf;
   }
 
-  .xl\:bg-purple,
   .xl\:hover\:bg-purple:hover {
     background-color: #9561e2;
   }
 
-  .xl\:bg-purple-light,
   .xl\:hover\:bg-purple-light:hover {
     background-color: #a779e9;
   }
 
-  .xl\:bg-purple-lighter,
   .xl\:hover\:bg-purple-lighter:hover {
     background-color: #d6bbfc;
   }
 
-  .xl\:bg-purple-lightest,
   .xl\:hover\:bg-purple-lightest:hover {
     background-color: #f3ebff;
   }
 
-  .xl\:bg-pink-darkest,
   .xl\:hover\:bg-pink-darkest:hover {
     background-color: #45051e;
   }
 
-  .xl\:bg-pink-darker,
   .xl\:hover\:bg-pink-darker:hover {
     background-color: #72173a;
   }
 
-  .xl\:bg-pink-dark,
   .xl\:hover\:bg-pink-dark:hover {
     background-color: #eb5286;
   }
 
-  .xl\:bg-pink,
   .xl\:hover\:bg-pink:hover {
     background-color: #f66d9b;
   }
 
-  .xl\:bg-pink-light,
   .xl\:hover\:bg-pink-light:hover {
     background-color: #fa7ea8;
   }
 
-  .xl\:bg-pink-lighter,
   .xl\:hover\:bg-pink-lighter:hover {
     background-color: #ffbbca;
   }
 
-  .xl\:bg-pink-lightest,
   .xl\:hover\:bg-pink-lightest:hover {
     background-color: #ffebef;
   }
@@ -14220,367 +17596,586 @@ button,
     border-left-width: 1px;
   }
 
-  .xl\:border-transparent,
+  .xl\:border-transparent {
+    border-color: transparent;
+  }
+
+  .xl\:border-black {
+    border-color: #222b2f;
+  }
+
+  .xl\:border-grey-darkest {
+    border-color: #364349;
+  }
+
+  .xl\:border-grey-darker {
+    border-color: #596a73;
+  }
+
+  .xl\:border-grey-dark {
+    border-color: #70818a;
+  }
+
+  .xl\:border-grey {
+    border-color: #9babb4;
+  }
+
+  .xl\:border-grey-light {
+    border-color: #dae4e9;
+  }
+
+  .xl\:border-grey-lighter {
+    border-color: #f3f7f9;
+  }
+
+  .xl\:border-grey-lightest {
+    border-color: #fafcfc;
+  }
+
+  .xl\:border-white {
+    border-color: #ffffff;
+  }
+
+  .xl\:border-red-darkest {
+    border-color: #420806;
+  }
+
+  .xl\:border-red-darker {
+    border-color: #6a1b19;
+  }
+
+  .xl\:border-red-dark {
+    border-color: #cc1f1a;
+  }
+
+  .xl\:border-red {
+    border-color: #e3342f;
+  }
+
+  .xl\:border-red-light {
+    border-color: #ef5753;
+  }
+
+  .xl\:border-red-lighter {
+    border-color: #f9acaa;
+  }
+
+  .xl\:border-red-lightest {
+    border-color: #fcebea;
+  }
+
+  .xl\:border-orange-darkest {
+    border-color: #542605;
+  }
+
+  .xl\:border-orange-darker {
+    border-color: #7f4012;
+  }
+
+  .xl\:border-orange-dark {
+    border-color: #de751f;
+  }
+
+  .xl\:border-orange {
+    border-color: #f6993f;
+  }
+
+  .xl\:border-orange-light {
+    border-color: #faad63;
+  }
+
+  .xl\:border-orange-lighter {
+    border-color: #fcd9b6;
+  }
+
+  .xl\:border-orange-lightest {
+    border-color: #fff5eb;
+  }
+
+  .xl\:border-yellow-darkest {
+    border-color: #453411;
+  }
+
+  .xl\:border-yellow-darker {
+    border-color: #684f1d;
+  }
+
+  .xl\:border-yellow-dark {
+    border-color: #f2d024;
+  }
+
+  .xl\:border-yellow {
+    border-color: #ffed4a;
+  }
+
+  .xl\:border-yellow-light {
+    border-color: #fff382;
+  }
+
+  .xl\:border-yellow-lighter {
+    border-color: #fff9c2;
+  }
+
+  .xl\:border-yellow-lightest {
+    border-color: #fcfbeb;
+  }
+
+  .xl\:border-green-darkest {
+    border-color: #032d19;
+  }
+
+  .xl\:border-green-darker {
+    border-color: #0b4228;
+  }
+
+  .xl\:border-green-dark {
+    border-color: #1f9d55;
+  }
+
+  .xl\:border-green {
+    border-color: #38c172;
+  }
+
+  .xl\:border-green-light {
+    border-color: #51d88a;
+  }
+
+  .xl\:border-green-lighter {
+    border-color: #a2f5bf;
+  }
+
+  .xl\:border-green-lightest {
+    border-color: #e3fcec;
+  }
+
+  .xl\:border-teal-darkest {
+    border-color: #0d3331;
+  }
+
+  .xl\:border-teal-darker {
+    border-color: #174e4b;
+  }
+
+  .xl\:border-teal-dark {
+    border-color: #38a89d;
+  }
+
+  .xl\:border-teal {
+    border-color: #4dc0b5;
+  }
+
+  .xl\:border-teal-light {
+    border-color: #64d5ca;
+  }
+
+  .xl\:border-teal-lighter {
+    border-color: #a0f0ed;
+  }
+
+  .xl\:border-teal-lightest {
+    border-color: #e8fffe;
+  }
+
+  .xl\:border-blue-darkest {
+    border-color: #05233b;
+  }
+
+  .xl\:border-blue-darker {
+    border-color: #103d60;
+  }
+
+  .xl\:border-blue-dark {
+    border-color: #2779bd;
+  }
+
+  .xl\:border-blue {
+    border-color: #3490dc;
+  }
+
+  .xl\:border-blue-light {
+    border-color: #6cb2eb;
+  }
+
+  .xl\:border-blue-lighter {
+    border-color: #bcdefa;
+  }
+
+  .xl\:border-blue-lightest {
+    border-color: #eff8ff;
+  }
+
+  .xl\:border-indigo-darkest {
+    border-color: #191e38;
+  }
+
+  .xl\:border-indigo-darker {
+    border-color: #2f365f;
+  }
+
+  .xl\:border-indigo-dark {
+    border-color: #5661b3;
+  }
+
+  .xl\:border-indigo {
+    border-color: #6574cd;
+  }
+
+  .xl\:border-indigo-light {
+    border-color: #7886d7;
+  }
+
+  .xl\:border-indigo-lighter {
+    border-color: #b2b7ff;
+  }
+
+  .xl\:border-indigo-lightest {
+    border-color: #e6e8ff;
+  }
+
+  .xl\:border-purple-darkest {
+    border-color: #1f133f;
+  }
+
+  .xl\:border-purple-darker {
+    border-color: #352465;
+  }
+
+  .xl\:border-purple-dark {
+    border-color: #794acf;
+  }
+
+  .xl\:border-purple {
+    border-color: #9561e2;
+  }
+
+  .xl\:border-purple-light {
+    border-color: #a779e9;
+  }
+
+  .xl\:border-purple-lighter {
+    border-color: #d6bbfc;
+  }
+
+  .xl\:border-purple-lightest {
+    border-color: #f3ebff;
+  }
+
+  .xl\:border-pink-darkest {
+    border-color: #45051e;
+  }
+
+  .xl\:border-pink-darker {
+    border-color: #72173a;
+  }
+
+  .xl\:border-pink-dark {
+    border-color: #eb5286;
+  }
+
+  .xl\:border-pink {
+    border-color: #f66d9b;
+  }
+
+  .xl\:border-pink-light {
+    border-color: #fa7ea8;
+  }
+
+  .xl\:border-pink-lighter {
+    border-color: #ffbbca;
+  }
+
+  .xl\:border-pink-lightest {
+    border-color: #ffebef;
+  }
+
   .xl\:hover\:border-transparent:hover {
     border-color: transparent;
   }
 
-  .xl\:border-black,
   .xl\:hover\:border-black:hover {
     border-color: #222b2f;
   }
 
-  .xl\:border-grey-darkest,
   .xl\:hover\:border-grey-darkest:hover {
     border-color: #364349;
   }
 
-  .xl\:border-grey-darker,
   .xl\:hover\:border-grey-darker:hover {
     border-color: #596a73;
   }
 
-  .xl\:border-grey-dark,
   .xl\:hover\:border-grey-dark:hover {
     border-color: #70818a;
   }
 
-  .xl\:border-grey,
   .xl\:hover\:border-grey:hover {
     border-color: #9babb4;
   }
 
-  .xl\:border-grey-light,
   .xl\:hover\:border-grey-light:hover {
     border-color: #dae4e9;
   }
 
-  .xl\:border-grey-lighter,
   .xl\:hover\:border-grey-lighter:hover {
     border-color: #f3f7f9;
   }
 
-  .xl\:border-grey-lightest,
   .xl\:hover\:border-grey-lightest:hover {
     border-color: #fafcfc;
   }
 
-  .xl\:border-white,
   .xl\:hover\:border-white:hover {
     border-color: #ffffff;
   }
 
-  .xl\:border-red-darkest,
   .xl\:hover\:border-red-darkest:hover {
     border-color: #420806;
   }
 
-  .xl\:border-red-darker,
   .xl\:hover\:border-red-darker:hover {
     border-color: #6a1b19;
   }
 
-  .xl\:border-red-dark,
   .xl\:hover\:border-red-dark:hover {
     border-color: #cc1f1a;
   }
 
-  .xl\:border-red,
   .xl\:hover\:border-red:hover {
     border-color: #e3342f;
   }
 
-  .xl\:border-red-light,
   .xl\:hover\:border-red-light:hover {
     border-color: #ef5753;
   }
 
-  .xl\:border-red-lighter,
   .xl\:hover\:border-red-lighter:hover {
     border-color: #f9acaa;
   }
 
-  .xl\:border-red-lightest,
   .xl\:hover\:border-red-lightest:hover {
     border-color: #fcebea;
   }
 
-  .xl\:border-orange-darkest,
   .xl\:hover\:border-orange-darkest:hover {
     border-color: #542605;
   }
 
-  .xl\:border-orange-darker,
   .xl\:hover\:border-orange-darker:hover {
     border-color: #7f4012;
   }
 
-  .xl\:border-orange-dark,
   .xl\:hover\:border-orange-dark:hover {
     border-color: #de751f;
   }
 
-  .xl\:border-orange,
   .xl\:hover\:border-orange:hover {
     border-color: #f6993f;
   }
 
-  .xl\:border-orange-light,
   .xl\:hover\:border-orange-light:hover {
     border-color: #faad63;
   }
 
-  .xl\:border-orange-lighter,
   .xl\:hover\:border-orange-lighter:hover {
     border-color: #fcd9b6;
   }
 
-  .xl\:border-orange-lightest,
   .xl\:hover\:border-orange-lightest:hover {
     border-color: #fff5eb;
   }
 
-  .xl\:border-yellow-darkest,
   .xl\:hover\:border-yellow-darkest:hover {
     border-color: #453411;
   }
 
-  .xl\:border-yellow-darker,
   .xl\:hover\:border-yellow-darker:hover {
     border-color: #684f1d;
   }
 
-  .xl\:border-yellow-dark,
   .xl\:hover\:border-yellow-dark:hover {
     border-color: #f2d024;
   }
 
-  .xl\:border-yellow,
   .xl\:hover\:border-yellow:hover {
     border-color: #ffed4a;
   }
 
-  .xl\:border-yellow-light,
   .xl\:hover\:border-yellow-light:hover {
     border-color: #fff382;
   }
 
-  .xl\:border-yellow-lighter,
   .xl\:hover\:border-yellow-lighter:hover {
     border-color: #fff9c2;
   }
 
-  .xl\:border-yellow-lightest,
   .xl\:hover\:border-yellow-lightest:hover {
     border-color: #fcfbeb;
   }
 
-  .xl\:border-green-darkest,
   .xl\:hover\:border-green-darkest:hover {
     border-color: #032d19;
   }
 
-  .xl\:border-green-darker,
   .xl\:hover\:border-green-darker:hover {
     border-color: #0b4228;
   }
 
-  .xl\:border-green-dark,
   .xl\:hover\:border-green-dark:hover {
     border-color: #1f9d55;
   }
 
-  .xl\:border-green,
   .xl\:hover\:border-green:hover {
     border-color: #38c172;
   }
 
-  .xl\:border-green-light,
   .xl\:hover\:border-green-light:hover {
     border-color: #51d88a;
   }
 
-  .xl\:border-green-lighter,
   .xl\:hover\:border-green-lighter:hover {
     border-color: #a2f5bf;
   }
 
-  .xl\:border-green-lightest,
   .xl\:hover\:border-green-lightest:hover {
     border-color: #e3fcec;
   }
 
-  .xl\:border-teal-darkest,
   .xl\:hover\:border-teal-darkest:hover {
     border-color: #0d3331;
   }
 
-  .xl\:border-teal-darker,
   .xl\:hover\:border-teal-darker:hover {
     border-color: #174e4b;
   }
 
-  .xl\:border-teal-dark,
   .xl\:hover\:border-teal-dark:hover {
     border-color: #38a89d;
   }
 
-  .xl\:border-teal,
   .xl\:hover\:border-teal:hover {
     border-color: #4dc0b5;
   }
 
-  .xl\:border-teal-light,
   .xl\:hover\:border-teal-light:hover {
     border-color: #64d5ca;
   }
 
-  .xl\:border-teal-lighter,
   .xl\:hover\:border-teal-lighter:hover {
     border-color: #a0f0ed;
   }
 
-  .xl\:border-teal-lightest,
   .xl\:hover\:border-teal-lightest:hover {
     border-color: #e8fffe;
   }
 
-  .xl\:border-blue-darkest,
   .xl\:hover\:border-blue-darkest:hover {
     border-color: #05233b;
   }
 
-  .xl\:border-blue-darker,
   .xl\:hover\:border-blue-darker:hover {
     border-color: #103d60;
   }
 
-  .xl\:border-blue-dark,
   .xl\:hover\:border-blue-dark:hover {
     border-color: #2779bd;
   }
 
-  .xl\:border-blue,
   .xl\:hover\:border-blue:hover {
     border-color: #3490dc;
   }
 
-  .xl\:border-blue-light,
   .xl\:hover\:border-blue-light:hover {
     border-color: #6cb2eb;
   }
 
-  .xl\:border-blue-lighter,
   .xl\:hover\:border-blue-lighter:hover {
     border-color: #bcdefa;
   }
 
-  .xl\:border-blue-lightest,
   .xl\:hover\:border-blue-lightest:hover {
     border-color: #eff8ff;
   }
 
-  .xl\:border-indigo-darkest,
   .xl\:hover\:border-indigo-darkest:hover {
     border-color: #191e38;
   }
 
-  .xl\:border-indigo-darker,
   .xl\:hover\:border-indigo-darker:hover {
     border-color: #2f365f;
   }
 
-  .xl\:border-indigo-dark,
   .xl\:hover\:border-indigo-dark:hover {
     border-color: #5661b3;
   }
 
-  .xl\:border-indigo,
   .xl\:hover\:border-indigo:hover {
     border-color: #6574cd;
   }
 
-  .xl\:border-indigo-light,
   .xl\:hover\:border-indigo-light:hover {
     border-color: #7886d7;
   }
 
-  .xl\:border-indigo-lighter,
   .xl\:hover\:border-indigo-lighter:hover {
     border-color: #b2b7ff;
   }
 
-  .xl\:border-indigo-lightest,
   .xl\:hover\:border-indigo-lightest:hover {
     border-color: #e6e8ff;
   }
 
-  .xl\:border-purple-darkest,
   .xl\:hover\:border-purple-darkest:hover {
     border-color: #1f133f;
   }
 
-  .xl\:border-purple-darker,
   .xl\:hover\:border-purple-darker:hover {
     border-color: #352465;
   }
 
-  .xl\:border-purple-dark,
   .xl\:hover\:border-purple-dark:hover {
     border-color: #794acf;
   }
 
-  .xl\:border-purple,
   .xl\:hover\:border-purple:hover {
     border-color: #9561e2;
   }
 
-  .xl\:border-purple-light,
   .xl\:hover\:border-purple-light:hover {
     border-color: #a779e9;
   }
 
-  .xl\:border-purple-lighter,
   .xl\:hover\:border-purple-lighter:hover {
     border-color: #d6bbfc;
   }
 
-  .xl\:border-purple-lightest,
   .xl\:hover\:border-purple-lightest:hover {
     border-color: #f3ebff;
   }
 
-  .xl\:border-pink-darkest,
   .xl\:hover\:border-pink-darkest:hover {
     border-color: #45051e;
   }
 
-  .xl\:border-pink-darker,
   .xl\:hover\:border-pink-darker:hover {
     border-color: #72173a;
   }
 
-  .xl\:border-pink-dark,
   .xl\:hover\:border-pink-dark:hover {
     border-color: #eb5286;
   }
 
-  .xl\:border-pink,
   .xl\:hover\:border-pink:hover {
     border-color: #f66d9b;
   }
 
-  .xl\:border-pink-light,
   .xl\:hover\:border-pink-light:hover {
     border-color: #fa7ea8;
   }
 
-  .xl\:border-pink-lighter,
   .xl\:hover\:border-pink-lighter:hover {
     border-color: #ffbbca;
   }
 
-  .xl\:border-pink-lightest,
   .xl\:hover\:border-pink-lightest:hover {
     border-color: #ffebef;
   }
diff --git a/jest/customMatchers.js b/jest/customMatchers.js
index 9d2b7af6e..23372befc 100644
--- a/jest/customMatchers.js
+++ b/jest/customMatchers.js
@@ -6,17 +6,16 @@ expect.extend({
       return str.replace(/\s/g, '')
     }
 
-    if (stripped(received) == stripped(argument)) {
+    if (stripped(received) === stripped(argument)) {
       return {
-        message: () =>
-          `expected ${received} not to match CSS ${argument}`,
+        message: () => `expected ${received} not to match CSS ${argument}`,
         pass: true,
-      };
+      }
     } else {
       return {
         message: () => `expected ${received} to match CSS ${argument}`,
         pass: false,
-      };
+      }
     }
-  }
+  },
 })
diff --git a/src/lib/substituteHoverableAtRules.js b/src/lib/substituteHoverableAtRules.js
index 1dc86a7c3..b11f9a317 100644
--- a/src/lib/substituteHoverableAtRules.js
+++ b/src/lib/substituteHoverableAtRules.js
@@ -1,5 +1,3 @@
-import cloneNodes from '../util/cloneNodes'
-
 export default function() {
   return function(css) {
     css.walkAtRules('hoverable', atRule => {
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index b95e6b706..a47dbc111 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -2,23 +2,23 @@ import _ from 'lodash'
 import postcss from 'postcss'
 
 const variantGenerators = {
-  hover: (rule) => {
-    const clonedRule = rule.clone()
+  hover: container => {
+    const cloned = container.clone()
 
-    clonedRule.walkRules(rule => {
+    cloned.walkRules(rule => {
       rule.selector = `.hover\\:${rule.selector.slice(1)}:hover`
     })
 
-    return clonedRule.nodes
+    return cloned.nodes
   },
-  focus: (rule) => {
-    const clonedRule = rule.clone()
+  focus: container => {
+    const cloned = container.clone()
 
-    clonedRule.walkRules(rule => {
+    cloned.walkRules(rule => {
       rule.selector = `.focus\\:${rule.selector.slice(1)}:focus`
     })
 
-    return clonedRule.nodes
+    return cloned.nodes
   },
 }
 
@@ -29,7 +29,7 @@ export default function() {
 
       atRule.before(atRule.clone().nodes)
 
-      _.forEach(['focus', 'hover'], (variant) => {
+      _.forEach(['focus', 'hover'], variant => {
         if (variants.includes(variant)) {
           atRule.before(variantGenerators[variant](atRule))
         }

From 28f73f2bf5821e037dadd1a11afc488030cec576 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 23 Nov 2017 09:58:42 -0500
Subject: [PATCH 3/3] Add support for including `responsive` in variants list

---
 __tests__/variantsAtRule.test.js     | 25 +++++++++++++++++++++++++
 src/lib/substituteVariantsAtRules.js |  6 ++++++
 2 files changed, 31 insertions(+)

diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js
index 2a4636fb4..3dc19ec86 100644
--- a/__tests__/variantsAtRule.test.js
+++ b/__tests__/variantsAtRule.test.js
@@ -69,3 +69,28 @@ test('it can generate hover and focus variants', () => {
     expect(result.warnings().length).toBe(0)
   })
 })
+
+test('it wraps the output in a responsive at-rule if responsive is included as a variant', () => {
+  const input = `
+    @variants responsive, hover, focus {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+  `
+
+  const output = `
+    @responsive {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+      .focus\\:banana:focus { color: yellow; }
+      .focus\\:chocolate:focus { color: brown; }
+      .hover\\:banana:hover { color: yellow; }
+      .hover\\:chocolate:hover { color: brown; }
+    }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toMatchCss(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js
index a47dbc111..fd8c85484 100644
--- a/src/lib/substituteVariantsAtRules.js
+++ b/src/lib/substituteVariantsAtRules.js
@@ -27,6 +27,12 @@ export default function() {
     css.walkAtRules('variants', atRule => {
       const variants = postcss.list.comma(atRule.params)
 
+      if (variants.includes('responsive')) {
+        const responsiveParent = postcss.atRule({ name: 'responsive' })
+        atRule.before(responsiveParent)
+        responsiveParent.append(atRule)
+      }
+
       atRule.before(atRule.clone().nodes)
 
       _.forEach(['focus', 'hover'], variant => {