diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
index f78ee39..b5e4012 100644
--- a/src/components/PageIntro.js
+++ b/src/components/PageIntro.js
@@ -37,12 +37,12 @@ class PageIntro extends Component {
             {this.props.children}
             <SectionIntro
               header
-              h2Classes="text-2xl md:text-4xl lg:text-5xl"
+              h2Classes="text-2xl md:text-4xl py-2 lg:text-5xl"
               intro={this.props.intro}
-              classes={`p-4 lg:text-left lg:max-w-sm content-center ${
+              classes={`md:p-4 lg:text-left lg:max-w-sm content-center ${
                 this.props.sectionClasses
               }`}
-              textClasses="font-medium opacity-80"
+              textClasses="text-xl opacity-80"
               headline={this.props.headline}
               text={this.props.text}
             />
diff --git a/src/components/SectionIntro.js b/src/components/SectionIntro.js
index 8a02762..95e36c7 100644
--- a/src/components/SectionIntro.js
+++ b/src/components/SectionIntro.js
@@ -11,7 +11,7 @@ const IntroDefault = ({ ...props }) => (
         className={`
       ${
         props.light ? headlineDark : headlineLight
-      } opacity-50 text-sm font-light text-black uppercase py-2 pb-1`}
+      } opacity-50 text-sm font-light text-black uppercase py-1`}
       >
         {props.intro}
       </h3>
@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
     {props.headline && (
       <h2
         className={`${props.light ? headlineDark : ''} ${props.h2Classes}
-    text-black py-4`}
+    text-black py-1`}
       >
         {props.headline}
       </h2>
@@ -28,7 +28,9 @@ const IntroDefault = ({ ...props }) => (
       <p
         className={`${props.light ? headlineDark : ''} ${
           props.header ? 'saburly-text-intro' : 'text-black-light'
-        } font-light text-lg leading-normal ${props.textClasses}`}
+        } font-light text-lg leading-smaller lg:leading-normal ${
+          props.textClasses
+        }`}
       >
         {props.text}
       </p>
diff --git a/src/pages/about.js b/src/pages/about.js
index a81dc87..7760f3e 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -22,15 +22,13 @@ import Nedim from '../images/developer-nedim.svg'
 
 const AboutPage = () => (
   <PageTransition>
-    <Fade top>
-      <PageIntro
-        tiltImage
-        headline="We know software"
-        text="Saburly was founded by senior tech leads that understand what it takes to create modern digital solutions. We have managed large software development teams for successful companies in the past and are now recruiting and mentoring the best talents in the industry for Saburly."
-        image={IntroImage}
-        imgClasses="border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100 -mb-12"
-      />
-    </Fade>
+    <PageIntro
+      tiltImage
+      headline="We know software"
+      text="Saburly was founded by senior tech leads that understand what it takes to create modern digital solutions. We have managed large software development teams for successful companies in the past and are now recruiting and mentoring the best talents in the industry for Saburly."
+      image={IntroImage}
+      imgClasses="border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100 -mb-12"
+    />
 
     <section className="container mx-auto p-4 md:p-0 my-20">
       <Fade>
@@ -63,40 +61,38 @@ const AboutPage = () => (
           textClasses="text-center"
         />
       </Fade>
-      <Fade>
-        <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Moris} title="Moris Pasic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Senad} title="Senad Uka" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Edin} title="Edin Dazdarevic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Mediha} title="Mediha Zukic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Mirna} title="Mirna Milic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Nina} title="Nina Juresic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Bilal} title="Bilal Catic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Almira} title="Almira Krdzic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Mickey} title="Miralem Halilovic" />
-          </div>
-          <div className="md:w-1/3 p-2">
-            <Card team teamMember={Nedim} title="Nedim Uka" />
-          </div>
+      <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Moris} title="Moris Pasic" />
         </div>
-      </Fade>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Senad} title="Senad Uka" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Edin} title="Edin Dazdarevic" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Mediha} title="Mediha Zukic" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Mirna} title="Mirna Milic" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Nina} title="Nina Juresic" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Bilal} title="Bilal Catic" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Almira} title="Almira Krdzic" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Mickey} title="Miralem Halilovic" />
+        </div>
+        <div className="md:w-1/3 p-2">
+          <Card team teamMember={Nedim} title="Nedim Uka" />
+        </div>
+      </div>
     </section>
   </PageTransition>
 )
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 85246e2..ee2ff74 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -13,16 +13,14 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ContactPage = () => (
   <PageTransition>
-    <Fade top>
-      <PageIntro
-        tiltImage
-        headline="Let's connect"
-        text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions."
-        sectionClasses="lg:mb-8"
-        image={ContactImage}
-        imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
-      />
-    </Fade>
+    <PageIntro
+      tiltImage
+      headline="Let's connect"
+      text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions."
+      sectionClasses="lg:mb-8"
+      image={ContactImage}
+      imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
+    />
 
     <section className="container mx-auto my-12 p-4">
       <div className="md:flex">
diff --git a/src/pages/index.js b/src/pages/index.js
index 90c4d20..d825479 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -29,25 +29,23 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const IndexPage = ({ ...props }) => (
   <PageTransition>
-    <Fade top>
-      <PageIntro
-        text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
-        image={ImgIntro}
-        imgClasses="-mb-20 p-2 md:p-8"
-      >
-        <h2 className="px-4 text-2xl text-black md:text-4xl xl:text-5xl pt-1">
-          We{' '}
-          <Typed
-            strings={['imagine', 'design', 'develop', 'maintain']}
-            typeSpeed={100}
-            backSpeed={50}
-            backDelay={3000}
-            loop
-          />
-          great<br />digital experiences
-        </h2>
-      </PageIntro>
-    </Fade>
+    <PageIntro
+      text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
+      image={ImgIntro}
+      imgClasses="-mb-20 p-2 md:p-8"
+    >
+      <h2 className="py-4 text-2xl xsm:text-3xl text-black md:text-4xl xl:text-5xl">
+        We{' '}
+        <Typed
+          strings={['imagine', 'design', 'develop', 'maintain']}
+          typeSpeed={100}
+          backSpeed={50}
+          backDelay={3000}
+          loop
+        />
+        great<br />digital experiences
+      </h2>
+    </PageIntro>
 
     <main>
       <section className="container mx-auto max-w-lg text-center mt-16 p-4">
diff --git a/src/pages/services.js b/src/pages/services.js
index 7fef6ea..c7a22f8 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -16,17 +16,15 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ServicesPage = () => (
   <PageTransition>
-    <Fade top>
-      <PageIntro
-        tiltImage
-        straight
-        buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
-        headline="Agile practitioners"
-        text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
-        image={IntroImage}
-        imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
-      />
-    </Fade>
+    <PageIntro
+      tiltImage
+      straight
+      buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
+      headline="Agile practitioners"
+      text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
+      image={IntroImage}
+      imgClasses="-mb-12 border-white rounded-lg opacity-100 lg:opacity-70 hover:opacity-100"
+    />
     <section className="px-4 py-16">
       <Fade>
         <div className="container mx-auto">
diff --git a/src/styles/general.css b/src/styles/general.css
index 4b3e4f9..0fa8353 100644
--- a/src/styles/general.css
+++ b/src/styles/general.css
@@ -188,3 +188,9 @@ a {
 .blog-post p {
   margin: 1.5rem 0;
 }
+
+@media (max-width: 575px) {
+  .container {
+    max-width: 95%;
+  }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
index 04aa4dc..ef3ff67 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -609,6 +609,12 @@ table {
   width: 100%;
 }
 
+@media (min-width: 370px) {
+  .container {
+    max-width: 370px;
+  }
+}
+
 @media (min-width: 576px) {
   .container {
     max-width: 576px;
@@ -2908,6 +2914,14 @@ table {
   line-height: 1.25;
 }
 
+.leading-smaller {
+  line-height: 1.5;
+}
+
+.leading-mid {
+  line-height: 1.6;
+}
+
 .leading-normal {
   line-height: 1.77;
 }
@@ -5802,6 +5816,5161 @@ table {
   z-index: auto;
 }
 
+@media (min-width: 370px) {
+  .xsm\:list-reset {
+    list-style: none;
+    padding: 0;
+  }
+
+  .xsm\:appearance-none {
+    appearance: none;
+  }
+
+  .xsm\:bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .xsm\:bg-local {
+    background-attachment: local;
+  }
+
+  .xsm\:bg-scroll {
+    background-attachment: scroll;
+  }
+
+  .xsm\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .xsm\:bg-black {
+    background-color: #2d2d2d;
+  }
+
+  .xsm\:bg-black-light {
+    background-color: #333;
+  }
+
+  .xsm\:bg-grey-darkest {
+    background-color: #3d4852;
+  }
+
+  .xsm\:bg-grey-darker {
+    background-color: #606f7b;
+  }
+
+  .xsm\:bg-grey-dark {
+    background-color: #8795a1;
+  }
+
+  .xsm\:bg-grey {
+    background-color: #b8c2cc;
+  }
+
+  .xsm\:bg-grey-light {
+    background-color: #dae1e7;
+  }
+
+  .xsm\:bg-grey-lighter {
+    background-color: #f1f5f8;
+  }
+
+  .xsm\:bg-grey-lightest {
+    background-color: #f8fafc;
+  }
+
+  .xsm\:bg-white {
+    background-color: #fff;
+  }
+
+  .xsm\:bg-red-darkest {
+    background-color: #3b0d0c;
+  }
+
+  .xsm\:bg-red-darker {
+    background-color: #621b18;
+  }
+
+  .xsm\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .xsm\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .xsm\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .xsm\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .xsm\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .xsm\:bg-orange-darkest {
+    background-color: #462a16;
+  }
+
+  .xsm\:bg-orange-darker {
+    background-color: #613b1f;
+  }
+
+  .xsm\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .xsm\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .xsm\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .xsm\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .xsm\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .xsm\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .xsm\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .xsm\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .xsm\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .xsm\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .xsm\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .xsm\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .xsm\:bg-green-darkest {
+    background-color: #0f2f21;
+  }
+
+  .xsm\:bg-green-darker {
+    background-color: #1a4731;
+  }
+
+  .xsm\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .xsm\:bg-green {
+    background-color: #38c172;
+  }
+
+  .xsm\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .xsm\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .xsm\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .xsm\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .xsm\:bg-teal-darker {
+    background-color: #20504f;
+  }
+
+  .xsm\:bg-teal-dark {
+    background-color: #51b5bb;
+  }
+
+  .xsm\:bg-teal {
+    background-color: #5dcdd4;
+  }
+
+  .xsm\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .xsm\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .xsm\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .xsm\:bg-blue-darkest {
+    background-color: #12283a;
+  }
+
+  .xsm\:bg-blue-darker {
+    background-color: #1c3d5a;
+  }
+
+  .xsm\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .xsm\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .xsm\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .xsm\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .xsm\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .xsm\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .xsm\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .xsm\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .xsm\:bg-indigo {
+    background-color: #636ef2;
+  }
+
+  .xsm\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .xsm\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .xsm\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .xsm\:bg-purple-darkest {
+    background-color: #21183c;
+  }
+
+  .xsm\:bg-purple-darker {
+    background-color: #382b5f;
+  }
+
+  .xsm\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .xsm\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .xsm\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .xsm\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .xsm\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .xsm\:bg-pink-darkest {
+    background-color: #451225;
+  }
+
+  .xsm\:bg-pink-darker {
+    background-color: #6f213f;
+  }
+
+  .xsm\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .xsm\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .xsm\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .xsm\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .xsm\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-transparent {
+    background-color: transparent;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-black {
+    background-color: #2d2d2d;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-black-light {
+    background-color: #333;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-grey-darkest {
+    background-color: #3d4852;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-grey-darker {
+    background-color: #606f7b;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-grey-dark {
+    background-color: #8795a1;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-grey {
+    background-color: #b8c2cc;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-grey-light {
+    background-color: #dae1e7;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-grey-lighter {
+    background-color: #f1f5f8;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-grey-lightest {
+    background-color: #f8fafc;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-white {
+    background-color: #fff;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-red-darkest {
+    background-color: #3b0d0c;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-red-darker {
+    background-color: #621b18;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-red-dark {
+    background-color: #cc1f1a;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-red {
+    background-color: #e3342f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-red-light {
+    background-color: #ef5753;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-red-lighter {
+    background-color: #f9acaa;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-red-lightest {
+    background-color: #fcebea;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-orange-darkest {
+    background-color: #462a16;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-orange-darker {
+    background-color: #613b1f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-orange-dark {
+    background-color: #de751f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-orange {
+    background-color: #f6993f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-orange-light {
+    background-color: #faad63;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-orange-lighter {
+    background-color: #fcd9b6;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-orange-lightest {
+    background-color: #fff5eb;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-yellow-darkest {
+    background-color: #453411;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-yellow-darker {
+    background-color: #684f1d;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-yellow-dark {
+    background-color: #f2d024;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-yellow {
+    background-color: #ffed4a;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-yellow-light {
+    background-color: #fff382;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-yellow-lighter {
+    background-color: #fff9c2;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-yellow-lightest {
+    background-color: #fcfbeb;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-green-darkest {
+    background-color: #0f2f21;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-green-darker {
+    background-color: #1a4731;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-green-dark {
+    background-color: #1f9d55;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-green {
+    background-color: #38c172;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-green-light {
+    background-color: #51d88a;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-green-lighter {
+    background-color: #a2f5bf;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-green-lightest {
+    background-color: #e3fcec;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-teal-darkest {
+    background-color: #0d3331;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-teal-darker {
+    background-color: #20504f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-teal-dark {
+    background-color: #51b5bb;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-teal {
+    background-color: #5dcdd4;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-teal-light {
+    background-color: #64d5ca;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-teal-lighter {
+    background-color: #a0f0ed;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-teal-lightest {
+    background-color: #e8fffe;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-blue-darkest {
+    background-color: #12283a;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-blue-darker {
+    background-color: #1c3d5a;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-blue-dark {
+    background-color: #2779bd;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-blue {
+    background-color: #3490dc;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-blue-light {
+    background-color: #6cb2eb;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-blue-lighter {
+    background-color: #bcdefa;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-blue-lightest {
+    background-color: #eff8ff;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-indigo-darkest {
+    background-color: #191e38;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-indigo-darker {
+    background-color: #2f365f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-indigo-dark {
+    background-color: #5661b3;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-indigo {
+    background-color: #636ef2;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-indigo-light {
+    background-color: #7886d7;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-indigo-lighter {
+    background-color: #b2b7ff;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-indigo-lightest {
+    background-color: #e6e8ff;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-purple-darkest {
+    background-color: #21183c;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-purple-darker {
+    background-color: #382b5f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-purple-dark {
+    background-color: #794acf;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-purple {
+    background-color: #9561e2;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-purple-light {
+    background-color: #a779e9;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-purple-lighter {
+    background-color: #d6bbfc;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-purple-lightest {
+    background-color: #f3ebff;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-pink-darkest {
+    background-color: #451225;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-pink-darker {
+    background-color: #6f213f;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-pink-dark {
+    background-color: #eb5286;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-pink {
+    background-color: #f66d9b;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-pink-light {
+    background-color: #fa7ea8;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-pink-lighter {
+    background-color: #ffbbca;
+  }
+
+  .group:hover .xsm\:group-hover\:bg-pink-lightest {
+    background-color: #ffebef;
+  }
+
+  .xsm\:hover\:bg-transparent:hover {
+    background-color: transparent;
+  }
+
+  .xsm\:hover\:bg-black:hover {
+    background-color: #2d2d2d;
+  }
+
+  .xsm\:hover\:bg-black-light:hover {
+    background-color: #333;
+  }
+
+  .xsm\:hover\:bg-grey-darkest:hover {
+    background-color: #3d4852;
+  }
+
+  .xsm\:hover\:bg-grey-darker:hover {
+    background-color: #606f7b;
+  }
+
+  .xsm\:hover\:bg-grey-dark:hover {
+    background-color: #8795a1;
+  }
+
+  .xsm\:hover\:bg-grey:hover {
+    background-color: #b8c2cc;
+  }
+
+  .xsm\:hover\:bg-grey-light:hover {
+    background-color: #dae1e7;
+  }
+
+  .xsm\:hover\:bg-grey-lighter:hover {
+    background-color: #f1f5f8;
+  }
+
+  .xsm\:hover\:bg-grey-lightest:hover {
+    background-color: #f8fafc;
+  }
+
+  .xsm\:hover\:bg-white:hover {
+    background-color: #fff;
+  }
+
+  .xsm\:hover\:bg-red-darkest:hover {
+    background-color: #3b0d0c;
+  }
+
+  .xsm\:hover\:bg-red-darker:hover {
+    background-color: #621b18;
+  }
+
+  .xsm\:hover\:bg-red-dark:hover {
+    background-color: #cc1f1a;
+  }
+
+  .xsm\:hover\:bg-red:hover {
+    background-color: #e3342f;
+  }
+
+  .xsm\:hover\:bg-red-light:hover {
+    background-color: #ef5753;
+  }
+
+  .xsm\:hover\:bg-red-lighter:hover {
+    background-color: #f9acaa;
+  }
+
+  .xsm\:hover\:bg-red-lightest:hover {
+    background-color: #fcebea;
+  }
+
+  .xsm\:hover\:bg-orange-darkest:hover {
+    background-color: #462a16;
+  }
+
+  .xsm\:hover\:bg-orange-darker:hover {
+    background-color: #613b1f;
+  }
+
+  .xsm\:hover\:bg-orange-dark:hover {
+    background-color: #de751f;
+  }
+
+  .xsm\:hover\:bg-orange:hover {
+    background-color: #f6993f;
+  }
+
+  .xsm\:hover\:bg-orange-light:hover {
+    background-color: #faad63;
+  }
+
+  .xsm\:hover\:bg-orange-lighter:hover {
+    background-color: #fcd9b6;
+  }
+
+  .xsm\:hover\:bg-orange-lightest:hover {
+    background-color: #fff5eb;
+  }
+
+  .xsm\:hover\:bg-yellow-darkest:hover {
+    background-color: #453411;
+  }
+
+  .xsm\:hover\:bg-yellow-darker:hover {
+    background-color: #684f1d;
+  }
+
+  .xsm\:hover\:bg-yellow-dark:hover {
+    background-color: #f2d024;
+  }
+
+  .xsm\:hover\:bg-yellow:hover {
+    background-color: #ffed4a;
+  }
+
+  .xsm\:hover\:bg-yellow-light:hover {
+    background-color: #fff382;
+  }
+
+  .xsm\:hover\:bg-yellow-lighter:hover {
+    background-color: #fff9c2;
+  }
+
+  .xsm\:hover\:bg-yellow-lightest:hover {
+    background-color: #fcfbeb;
+  }
+
+  .xsm\:hover\:bg-green-darkest:hover {
+    background-color: #0f2f21;
+  }
+
+  .xsm\:hover\:bg-green-darker:hover {
+    background-color: #1a4731;
+  }
+
+  .xsm\:hover\:bg-green-dark:hover {
+    background-color: #1f9d55;
+  }
+
+  .xsm\:hover\:bg-green:hover {
+    background-color: #38c172;
+  }
+
+  .xsm\:hover\:bg-green-light:hover {
+    background-color: #51d88a;
+  }
+
+  .xsm\:hover\:bg-green-lighter:hover {
+    background-color: #a2f5bf;
+  }
+
+  .xsm\:hover\:bg-green-lightest:hover {
+    background-color: #e3fcec;
+  }
+
+  .xsm\:hover\:bg-teal-darkest:hover {
+    background-color: #0d3331;
+  }
+
+  .xsm\:hover\:bg-teal-darker:hover {
+    background-color: #20504f;
+  }
+
+  .xsm\:hover\:bg-teal-dark:hover {
+    background-color: #51b5bb;
+  }
+
+  .xsm\:hover\:bg-teal:hover {
+    background-color: #5dcdd4;
+  }
+
+  .xsm\:hover\:bg-teal-light:hover {
+    background-color: #64d5ca;
+  }
+
+  .xsm\:hover\:bg-teal-lighter:hover {
+    background-color: #a0f0ed;
+  }
+
+  .xsm\:hover\:bg-teal-lightest:hover {
+    background-color: #e8fffe;
+  }
+
+  .xsm\:hover\:bg-blue-darkest:hover {
+    background-color: #12283a;
+  }
+
+  .xsm\:hover\:bg-blue-darker:hover {
+    background-color: #1c3d5a;
+  }
+
+  .xsm\:hover\:bg-blue-dark:hover {
+    background-color: #2779bd;
+  }
+
+  .xsm\:hover\:bg-blue:hover {
+    background-color: #3490dc;
+  }
+
+  .xsm\:hover\:bg-blue-light:hover {
+    background-color: #6cb2eb;
+  }
+
+  .xsm\:hover\:bg-blue-lighter:hover {
+    background-color: #bcdefa;
+  }
+
+  .xsm\:hover\:bg-blue-lightest:hover {
+    background-color: #eff8ff;
+  }
+
+  .xsm\:hover\:bg-indigo-darkest:hover {
+    background-color: #191e38;
+  }
+
+  .xsm\:hover\:bg-indigo-darker:hover {
+    background-color: #2f365f;
+  }
+
+  .xsm\:hover\:bg-indigo-dark:hover {
+    background-color: #5661b3;
+  }
+
+  .xsm\:hover\:bg-indigo:hover {
+    background-color: #636ef2;
+  }
+
+  .xsm\:hover\:bg-indigo-light:hover {
+    background-color: #7886d7;
+  }
+
+  .xsm\:hover\:bg-indigo-lighter:hover {
+    background-color: #b2b7ff;
+  }
+
+  .xsm\:hover\:bg-indigo-lightest:hover {
+    background-color: #e6e8ff;
+  }
+
+  .xsm\:hover\:bg-purple-darkest:hover {
+    background-color: #21183c;
+  }
+
+  .xsm\:hover\:bg-purple-darker:hover {
+    background-color: #382b5f;
+  }
+
+  .xsm\:hover\:bg-purple-dark:hover {
+    background-color: #794acf;
+  }
+
+  .xsm\:hover\:bg-purple:hover {
+    background-color: #9561e2;
+  }
+
+  .xsm\:hover\:bg-purple-light:hover {
+    background-color: #a779e9;
+  }
+
+  .xsm\:hover\:bg-purple-lighter:hover {
+    background-color: #d6bbfc;
+  }
+
+  .xsm\:hover\:bg-purple-lightest:hover {
+    background-color: #f3ebff;
+  }
+
+  .xsm\:hover\:bg-pink-darkest:hover {
+    background-color: #451225;
+  }
+
+  .xsm\:hover\:bg-pink-darker:hover {
+    background-color: #6f213f;
+  }
+
+  .xsm\:hover\:bg-pink-dark:hover {
+    background-color: #eb5286;
+  }
+
+  .xsm\:hover\:bg-pink:hover {
+    background-color: #f66d9b;
+  }
+
+  .xsm\:hover\:bg-pink-light:hover {
+    background-color: #fa7ea8;
+  }
+
+  .xsm\:hover\:bg-pink-lighter:hover {
+    background-color: #ffbbca;
+  }
+
+  .xsm\:hover\:bg-pink-lightest:hover {
+    background-color: #ffebef;
+  }
+
+  .xsm\:bg-bottom {
+    background-position: bottom;
+  }
+
+  .xsm\:bg-center {
+    background-position: center;
+  }
+
+  .xsm\:bg-left {
+    background-position: left;
+  }
+
+  .xsm\:bg-left-bottom {
+    background-position: left bottom;
+  }
+
+  .xsm\:bg-left-top {
+    background-position: left top;
+  }
+
+  .xsm\:bg-right {
+    background-position: right;
+  }
+
+  .xsm\:bg-right-bottom {
+    background-position: right bottom;
+  }
+
+  .xsm\:bg-right-top {
+    background-position: right top;
+  }
+
+  .xsm\:bg-top {
+    background-position: top;
+  }
+
+  .xsm\:bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .xsm\:bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .xsm\:bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .xsm\:bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
+  .xsm\:bg-auto {
+    background-size: auto;
+  }
+
+  .xsm\:bg-cover {
+    background-size: cover;
+  }
+
+  .xsm\:bg-contain {
+    background-size: contain;
+  }
+
+  .xsm\:border-transparent {
+    border-color: transparent;
+  }
+
+  .xsm\:border-black {
+    border-color: #2d2d2d;
+  }
+
+  .xsm\:border-black-light {
+    border-color: #333;
+  }
+
+  .xsm\:border-grey-darkest {
+    border-color: #3d4852;
+  }
+
+  .xsm\:border-grey-darker {
+    border-color: #606f7b;
+  }
+
+  .xsm\:border-grey-dark {
+    border-color: #8795a1;
+  }
+
+  .xsm\:border-grey {
+    border-color: #b8c2cc;
+  }
+
+  .xsm\:border-grey-light {
+    border-color: #dae1e7;
+  }
+
+  .xsm\:border-grey-lighter {
+    border-color: #f1f5f8;
+  }
+
+  .xsm\:border-grey-lightest {
+    border-color: #f8fafc;
+  }
+
+  .xsm\:border-white {
+    border-color: #fff;
+  }
+
+  .xsm\:border-red-darkest {
+    border-color: #3b0d0c;
+  }
+
+  .xsm\:border-red-darker {
+    border-color: #621b18;
+  }
+
+  .xsm\:border-red-dark {
+    border-color: #cc1f1a;
+  }
+
+  .xsm\:border-red {
+    border-color: #e3342f;
+  }
+
+  .xsm\:border-red-light {
+    border-color: #ef5753;
+  }
+
+  .xsm\:border-red-lighter {
+    border-color: #f9acaa;
+  }
+
+  .xsm\:border-red-lightest {
+    border-color: #fcebea;
+  }
+
+  .xsm\:border-orange-darkest {
+    border-color: #462a16;
+  }
+
+  .xsm\:border-orange-darker {
+    border-color: #613b1f;
+  }
+
+  .xsm\:border-orange-dark {
+    border-color: #de751f;
+  }
+
+  .xsm\:border-orange {
+    border-color: #f6993f;
+  }
+
+  .xsm\:border-orange-light {
+    border-color: #faad63;
+  }
+
+  .xsm\:border-orange-lighter {
+    border-color: #fcd9b6;
+  }
+
+  .xsm\:border-orange-lightest {
+    border-color: #fff5eb;
+  }
+
+  .xsm\:border-yellow-darkest {
+    border-color: #453411;
+  }
+
+  .xsm\:border-yellow-darker {
+    border-color: #684f1d;
+  }
+
+  .xsm\:border-yellow-dark {
+    border-color: #f2d024;
+  }
+
+  .xsm\:border-yellow {
+    border-color: #ffed4a;
+  }
+
+  .xsm\:border-yellow-light {
+    border-color: #fff382;
+  }
+
+  .xsm\:border-yellow-lighter {
+    border-color: #fff9c2;
+  }
+
+  .xsm\:border-yellow-lightest {
+    border-color: #fcfbeb;
+  }
+
+  .xsm\:border-green-darkest {
+    border-color: #0f2f21;
+  }
+
+  .xsm\:border-green-darker {
+    border-color: #1a4731;
+  }
+
+  .xsm\:border-green-dark {
+    border-color: #1f9d55;
+  }
+
+  .xsm\:border-green {
+    border-color: #38c172;
+  }
+
+  .xsm\:border-green-light {
+    border-color: #51d88a;
+  }
+
+  .xsm\:border-green-lighter {
+    border-color: #a2f5bf;
+  }
+
+  .xsm\:border-green-lightest {
+    border-color: #e3fcec;
+  }
+
+  .xsm\:border-teal-darkest {
+    border-color: #0d3331;
+  }
+
+  .xsm\:border-teal-darker {
+    border-color: #20504f;
+  }
+
+  .xsm\:border-teal-dark {
+    border-color: #51b5bb;
+  }
+
+  .xsm\:border-teal {
+    border-color: #5dcdd4;
+  }
+
+  .xsm\:border-teal-light {
+    border-color: #64d5ca;
+  }
+
+  .xsm\:border-teal-lighter {
+    border-color: #a0f0ed;
+  }
+
+  .xsm\:border-teal-lightest {
+    border-color: #e8fffe;
+  }
+
+  .xsm\:border-blue-darkest {
+    border-color: #12283a;
+  }
+
+  .xsm\:border-blue-darker {
+    border-color: #1c3d5a;
+  }
+
+  .xsm\:border-blue-dark {
+    border-color: #2779bd;
+  }
+
+  .xsm\:border-blue {
+    border-color: #3490dc;
+  }
+
+  .xsm\:border-blue-light {
+    border-color: #6cb2eb;
+  }
+
+  .xsm\:border-blue-lighter {
+    border-color: #bcdefa;
+  }
+
+  .xsm\:border-blue-lightest {
+    border-color: #eff8ff;
+  }
+
+  .xsm\:border-indigo-darkest {
+    border-color: #191e38;
+  }
+
+  .xsm\:border-indigo-darker {
+    border-color: #2f365f;
+  }
+
+  .xsm\:border-indigo-dark {
+    border-color: #5661b3;
+  }
+
+  .xsm\:border-indigo {
+    border-color: #636ef2;
+  }
+
+  .xsm\:border-indigo-light {
+    border-color: #7886d7;
+  }
+
+  .xsm\:border-indigo-lighter {
+    border-color: #b2b7ff;
+  }
+
+  .xsm\:border-indigo-lightest {
+    border-color: #e6e8ff;
+  }
+
+  .xsm\:border-purple-darkest {
+    border-color: #21183c;
+  }
+
+  .xsm\:border-purple-darker {
+    border-color: #382b5f;
+  }
+
+  .xsm\:border-purple-dark {
+    border-color: #794acf;
+  }
+
+  .xsm\:border-purple {
+    border-color: #9561e2;
+  }
+
+  .xsm\:border-purple-light {
+    border-color: #a779e9;
+  }
+
+  .xsm\:border-purple-lighter {
+    border-color: #d6bbfc;
+  }
+
+  .xsm\:border-purple-lightest {
+    border-color: #f3ebff;
+  }
+
+  .xsm\:border-pink-darkest {
+    border-color: #451225;
+  }
+
+  .xsm\:border-pink-darker {
+    border-color: #6f213f;
+  }
+
+  .xsm\:border-pink-dark {
+    border-color: #eb5286;
+  }
+
+  .xsm\:border-pink {
+    border-color: #f66d9b;
+  }
+
+  .xsm\:border-pink-light {
+    border-color: #fa7ea8;
+  }
+
+  .xsm\:border-pink-lighter {
+    border-color: #ffbbca;
+  }
+
+  .xsm\:border-pink-lightest {
+    border-color: #ffebef;
+  }
+
+  .xsm\:hover\:border-transparent:hover {
+    border-color: transparent;
+  }
+
+  .xsm\:hover\:border-black:hover {
+    border-color: #2d2d2d;
+  }
+
+  .xsm\:hover\:border-black-light:hover {
+    border-color: #333;
+  }
+
+  .xsm\:hover\:border-grey-darkest:hover {
+    border-color: #3d4852;
+  }
+
+  .xsm\:hover\:border-grey-darker:hover {
+    border-color: #606f7b;
+  }
+
+  .xsm\:hover\:border-grey-dark:hover {
+    border-color: #8795a1;
+  }
+
+  .xsm\:hover\:border-grey:hover {
+    border-color: #b8c2cc;
+  }
+
+  .xsm\:hover\:border-grey-light:hover {
+    border-color: #dae1e7;
+  }
+
+  .xsm\:hover\:border-grey-lighter:hover {
+    border-color: #f1f5f8;
+  }
+
+  .xsm\:hover\:border-grey-lightest:hover {
+    border-color: #f8fafc;
+  }
+
+  .xsm\:hover\:border-white:hover {
+    border-color: #fff;
+  }
+
+  .xsm\:hover\:border-red-darkest:hover {
+    border-color: #3b0d0c;
+  }
+
+  .xsm\:hover\:border-red-darker:hover {
+    border-color: #621b18;
+  }
+
+  .xsm\:hover\:border-red-dark:hover {
+    border-color: #cc1f1a;
+  }
+
+  .xsm\:hover\:border-red:hover {
+    border-color: #e3342f;
+  }
+
+  .xsm\:hover\:border-red-light:hover {
+    border-color: #ef5753;
+  }
+
+  .xsm\:hover\:border-red-lighter:hover {
+    border-color: #f9acaa;
+  }
+
+  .xsm\:hover\:border-red-lightest:hover {
+    border-color: #fcebea;
+  }
+
+  .xsm\:hover\:border-orange-darkest:hover {
+    border-color: #462a16;
+  }
+
+  .xsm\:hover\:border-orange-darker:hover {
+    border-color: #613b1f;
+  }
+
+  .xsm\:hover\:border-orange-dark:hover {
+    border-color: #de751f;
+  }
+
+  .xsm\:hover\:border-orange:hover {
+    border-color: #f6993f;
+  }
+
+  .xsm\:hover\:border-orange-light:hover {
+    border-color: #faad63;
+  }
+
+  .xsm\:hover\:border-orange-lighter:hover {
+    border-color: #fcd9b6;
+  }
+
+  .xsm\:hover\:border-orange-lightest:hover {
+    border-color: #fff5eb;
+  }
+
+  .xsm\:hover\:border-yellow-darkest:hover {
+    border-color: #453411;
+  }
+
+  .xsm\:hover\:border-yellow-darker:hover {
+    border-color: #684f1d;
+  }
+
+  .xsm\:hover\:border-yellow-dark:hover {
+    border-color: #f2d024;
+  }
+
+  .xsm\:hover\:border-yellow:hover {
+    border-color: #ffed4a;
+  }
+
+  .xsm\:hover\:border-yellow-light:hover {
+    border-color: #fff382;
+  }
+
+  .xsm\:hover\:border-yellow-lighter:hover {
+    border-color: #fff9c2;
+  }
+
+  .xsm\:hover\:border-yellow-lightest:hover {
+    border-color: #fcfbeb;
+  }
+
+  .xsm\:hover\:border-green-darkest:hover {
+    border-color: #0f2f21;
+  }
+
+  .xsm\:hover\:border-green-darker:hover {
+    border-color: #1a4731;
+  }
+
+  .xsm\:hover\:border-green-dark:hover {
+    border-color: #1f9d55;
+  }
+
+  .xsm\:hover\:border-green:hover {
+    border-color: #38c172;
+  }
+
+  .xsm\:hover\:border-green-light:hover {
+    border-color: #51d88a;
+  }
+
+  .xsm\:hover\:border-green-lighter:hover {
+    border-color: #a2f5bf;
+  }
+
+  .xsm\:hover\:border-green-lightest:hover {
+    border-color: #e3fcec;
+  }
+
+  .xsm\:hover\:border-teal-darkest:hover {
+    border-color: #0d3331;
+  }
+
+  .xsm\:hover\:border-teal-darker:hover {
+    border-color: #20504f;
+  }
+
+  .xsm\:hover\:border-teal-dark:hover {
+    border-color: #51b5bb;
+  }
+
+  .xsm\:hover\:border-teal:hover {
+    border-color: #5dcdd4;
+  }
+
+  .xsm\:hover\:border-teal-light:hover {
+    border-color: #64d5ca;
+  }
+
+  .xsm\:hover\:border-teal-lighter:hover {
+    border-color: #a0f0ed;
+  }
+
+  .xsm\:hover\:border-teal-lightest:hover {
+    border-color: #e8fffe;
+  }
+
+  .xsm\:hover\:border-blue-darkest:hover {
+    border-color: #12283a;
+  }
+
+  .xsm\:hover\:border-blue-darker:hover {
+    border-color: #1c3d5a;
+  }
+
+  .xsm\:hover\:border-blue-dark:hover {
+    border-color: #2779bd;
+  }
+
+  .xsm\:hover\:border-blue:hover {
+    border-color: #3490dc;
+  }
+
+  .xsm\:hover\:border-blue-light:hover {
+    border-color: #6cb2eb;
+  }
+
+  .xsm\:hover\:border-blue-lighter:hover {
+    border-color: #bcdefa;
+  }
+
+  .xsm\:hover\:border-blue-lightest:hover {
+    border-color: #eff8ff;
+  }
+
+  .xsm\:hover\:border-indigo-darkest:hover {
+    border-color: #191e38;
+  }
+
+  .xsm\:hover\:border-indigo-darker:hover {
+    border-color: #2f365f;
+  }
+
+  .xsm\:hover\:border-indigo-dark:hover {
+    border-color: #5661b3;
+  }
+
+  .xsm\:hover\:border-indigo:hover {
+    border-color: #636ef2;
+  }
+
+  .xsm\:hover\:border-indigo-light:hover {
+    border-color: #7886d7;
+  }
+
+  .xsm\:hover\:border-indigo-lighter:hover {
+    border-color: #b2b7ff;
+  }
+
+  .xsm\:hover\:border-indigo-lightest:hover {
+    border-color: #e6e8ff;
+  }
+
+  .xsm\:hover\:border-purple-darkest:hover {
+    border-color: #21183c;
+  }
+
+  .xsm\:hover\:border-purple-darker:hover {
+    border-color: #382b5f;
+  }
+
+  .xsm\:hover\:border-purple-dark:hover {
+    border-color: #794acf;
+  }
+
+  .xsm\:hover\:border-purple:hover {
+    border-color: #9561e2;
+  }
+
+  .xsm\:hover\:border-purple-light:hover {
+    border-color: #a779e9;
+  }
+
+  .xsm\:hover\:border-purple-lighter:hover {
+    border-color: #d6bbfc;
+  }
+
+  .xsm\:hover\:border-purple-lightest:hover {
+    border-color: #f3ebff;
+  }
+
+  .xsm\:hover\:border-pink-darkest:hover {
+    border-color: #451225;
+  }
+
+  .xsm\:hover\:border-pink-darker:hover {
+    border-color: #6f213f;
+  }
+
+  .xsm\:hover\:border-pink-dark:hover {
+    border-color: #eb5286;
+  }
+
+  .xsm\:hover\:border-pink:hover {
+    border-color: #f66d9b;
+  }
+
+  .xsm\:hover\:border-pink-light:hover {
+    border-color: #fa7ea8;
+  }
+
+  .xsm\:hover\:border-pink-lighter:hover {
+    border-color: #ffbbca;
+  }
+
+  .xsm\:hover\:border-pink-lightest:hover {
+    border-color: #ffebef;
+  }
+
+  .xsm\:rounded-none {
+    border-radius: 0;
+  }
+
+  .xsm\:rounded-sm {
+    border-radius: .125rem;
+  }
+
+  .xsm\:rounded {
+    border-radius: .25rem;
+  }
+
+  .xsm\:rounded-lg {
+    border-radius: .5rem;
+  }
+
+  .xsm\:rounded-full {
+    border-radius: 9999px;
+  }
+
+  .xsm\:rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .xsm\:rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .xsm\:rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xsm\:rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .xsm\:rounded-t-sm {
+    border-top-left-radius: .125rem;
+    border-top-right-radius: .125rem;
+  }
+
+  .xsm\:rounded-r-sm {
+    border-top-right-radius: .125rem;
+    border-bottom-right-radius: .125rem;
+  }
+
+  .xsm\:rounded-b-sm {
+    border-bottom-right-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xsm\:rounded-l-sm {
+    border-top-left-radius: .125rem;
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xsm\:rounded-t {
+    border-top-left-radius: .25rem;
+    border-top-right-radius: .25rem;
+  }
+
+  .xsm\:rounded-r {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
+
+  .xsm\:rounded-b {
+    border-bottom-right-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xsm\:rounded-l {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xsm\:rounded-t-lg {
+    border-top-left-radius: .5rem;
+    border-top-right-radius: .5rem;
+  }
+
+  .xsm\:rounded-r-lg {
+    border-top-right-radius: .5rem;
+    border-bottom-right-radius: .5rem;
+  }
+
+  .xsm\:rounded-b-lg {
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xsm\:rounded-l-lg {
+    border-top-left-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xsm\:rounded-t-full {
+    border-top-left-radius: 9999px;
+    border-top-right-radius: 9999px;
+  }
+
+  .xsm\:rounded-r-full {
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+  }
+
+  .xsm\:rounded-b-full {
+    border-bottom-right-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xsm\:rounded-l-full {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xsm\:rounded-tl-none {
+    border-top-left-radius: 0;
+  }
+
+  .xsm\:rounded-tr-none {
+    border-top-right-radius: 0;
+  }
+
+  .xsm\:rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+
+  .xsm\:rounded-bl-none {
+    border-bottom-left-radius: 0;
+  }
+
+  .xsm\:rounded-tl-sm {
+    border-top-left-radius: .125rem;
+  }
+
+  .xsm\:rounded-tr-sm {
+    border-top-right-radius: .125rem;
+  }
+
+  .xsm\:rounded-br-sm {
+    border-bottom-right-radius: .125rem;
+  }
+
+  .xsm\:rounded-bl-sm {
+    border-bottom-left-radius: .125rem;
+  }
+
+  .xsm\:rounded-tl {
+    border-top-left-radius: .25rem;
+  }
+
+  .xsm\:rounded-tr {
+    border-top-right-radius: .25rem;
+  }
+
+  .xsm\:rounded-br {
+    border-bottom-right-radius: .25rem;
+  }
+
+  .xsm\:rounded-bl {
+    border-bottom-left-radius: .25rem;
+  }
+
+  .xsm\:rounded-tl-lg {
+    border-top-left-radius: .5rem;
+  }
+
+  .xsm\:rounded-tr-lg {
+    border-top-right-radius: .5rem;
+  }
+
+  .xsm\:rounded-br-lg {
+    border-bottom-right-radius: .5rem;
+  }
+
+  .xsm\:rounded-bl-lg {
+    border-bottom-left-radius: .5rem;
+  }
+
+  .xsm\:rounded-tl-full {
+    border-top-left-radius: 9999px;
+  }
+
+  .xsm\:rounded-tr-full {
+    border-top-right-radius: 9999px;
+  }
+
+  .xsm\:rounded-br-full {
+    border-bottom-right-radius: 9999px;
+  }
+
+  .xsm\:rounded-bl-full {
+    border-bottom-left-radius: 9999px;
+  }
+
+  .xsm\:border-solid {
+    border-style: solid;
+  }
+
+  .xsm\:border-dashed {
+    border-style: dashed;
+  }
+
+  .xsm\:border-dotted {
+    border-style: dotted;
+  }
+
+  .xsm\:border-none {
+    border-style: none;
+  }
+
+  .xsm\:border-0 {
+    border-width: 0;
+  }
+
+  .xsm\:border-2 {
+    border-width: 2px;
+  }
+
+  .xsm\:border-4 {
+    border-width: 4px;
+  }
+
+  .xsm\:border-8 {
+    border-width: 8px;
+  }
+
+  .xsm\:border {
+    border-width: 1px;
+  }
+
+  .xsm\:border-t-0 {
+    border-top-width: 0;
+  }
+
+  .xsm\:border-r-0 {
+    border-right-width: 0;
+  }
+
+  .xsm\:border-b-0 {
+    border-bottom-width: 0;
+  }
+
+  .xsm\:border-l-0 {
+    border-left-width: 0;
+  }
+
+  .xsm\:border-t-2 {
+    border-top-width: 2px;
+  }
+
+  .xsm\:border-r-2 {
+    border-right-width: 2px;
+  }
+
+  .xsm\:border-b-2 {
+    border-bottom-width: 2px;
+  }
+
+  .xsm\:border-l-2 {
+    border-left-width: 2px;
+  }
+
+  .xsm\:border-t-4 {
+    border-top-width: 4px;
+  }
+
+  .xsm\:border-r-4 {
+    border-right-width: 4px;
+  }
+
+  .xsm\:border-b-4 {
+    border-bottom-width: 4px;
+  }
+
+  .xsm\:border-l-4 {
+    border-left-width: 4px;
+  }
+
+  .xsm\:border-t-8 {
+    border-top-width: 8px;
+  }
+
+  .xsm\:border-r-8 {
+    border-right-width: 8px;
+  }
+
+  .xsm\:border-b-8 {
+    border-bottom-width: 8px;
+  }
+
+  .xsm\:border-l-8 {
+    border-left-width: 8px;
+  }
+
+  .xsm\:border-t {
+    border-top-width: 1px;
+  }
+
+  .xsm\:border-r {
+    border-right-width: 1px;
+  }
+
+  .xsm\:border-b {
+    border-bottom-width: 1px;
+  }
+
+  .xsm\:border-l {
+    border-left-width: 1px;
+  }
+
+  .xsm\:cursor-auto {
+    cursor: auto;
+  }
+
+  .xsm\:cursor-default {
+    cursor: default;
+  }
+
+  .xsm\:cursor-pointer {
+    cursor: pointer;
+  }
+
+  .xsm\:cursor-wait {
+    cursor: wait;
+  }
+
+  .xsm\:cursor-move {
+    cursor: move;
+  }
+
+  .xsm\:cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .xsm\:block {
+    display: block;
+  }
+
+  .xsm\:inline-block {
+    display: inline-block;
+  }
+
+  .xsm\:inline {
+    display: inline;
+  }
+
+  .xsm\:table {
+    display: table;
+  }
+
+  .xsm\:table-row {
+    display: table-row;
+  }
+
+  .xsm\:table-cell {
+    display: table-cell;
+  }
+
+  .xsm\:hidden {
+    display: none;
+  }
+
+  .xsm\:flex {
+    display: flex;
+  }
+
+  .xsm\:inline-flex {
+    display: inline-flex;
+  }
+
+  .xsm\:flex-row {
+    flex-direction: row;
+  }
+
+  .xsm\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .xsm\:flex-col {
+    flex-direction: column;
+  }
+
+  .xsm\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  .xsm\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .xsm\:flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  .xsm\:flex-no-wrap {
+    flex-wrap: nowrap;
+  }
+
+  .xsm\:items-start {
+    align-items: flex-start;
+  }
+
+  .xsm\:items-end {
+    align-items: flex-end;
+  }
+
+  .xsm\:items-center {
+    align-items: center;
+  }
+
+  .xsm\:items-baseline {
+    align-items: baseline;
+  }
+
+  .xsm\:items-stretch {
+    align-items: stretch;
+  }
+
+  .xsm\:self-auto {
+    align-self: auto;
+  }
+
+  .xsm\:self-start {
+    align-self: flex-start;
+  }
+
+  .xsm\:self-end {
+    align-self: flex-end;
+  }
+
+  .xsm\:self-center {
+    align-self: center;
+  }
+
+  .xsm\:self-stretch {
+    align-self: stretch;
+  }
+
+  .xsm\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .xsm\:justify-end {
+    justify-content: flex-end;
+  }
+
+  .xsm\:justify-center {
+    justify-content: center;
+  }
+
+  .xsm\:justify-between {
+    justify-content: space-between;
+  }
+
+  .xsm\:justify-around {
+    justify-content: space-around;
+  }
+
+  .xsm\:content-center {
+    align-content: center;
+  }
+
+  .xsm\:content-start {
+    align-content: flex-start;
+  }
+
+  .xsm\:content-end {
+    align-content: flex-end;
+  }
+
+  .xsm\:content-between {
+    align-content: space-between;
+  }
+
+  .xsm\:content-around {
+    align-content: space-around;
+  }
+
+  .xsm\:flex-1 {
+    flex: 1;
+  }
+
+  .xsm\:flex-auto {
+    flex: auto;
+  }
+
+  .xsm\:flex-initial {
+    flex: initial;
+  }
+
+  .xsm\:flex-none {
+    flex: none;
+  }
+
+  .xsm\:flex-grow {
+    flex-grow: 1;
+  }
+
+  .xsm\:flex-shrink {
+    flex-shrink: 1;
+  }
+
+  .xsm\:flex-no-grow {
+    flex-grow: 0;
+  }
+
+  .xsm\:flex-no-shrink {
+    flex-shrink: 0;
+  }
+
+  .xsm\:float-right {
+    float: right;
+  }
+
+  .xsm\:float-left {
+    float: left;
+  }
+
+  .xsm\:float-none {
+    float: none;
+  }
+
+  .xsm\:clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .xsm\:font-sans {
+    font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  }
+
+  .xsm\:font-text {
+    font-family: Roboto Condensed, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  }
+
+  .xsm\:font-serif {
+    font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
+  }
+
+  .xsm\:font-mono {
+    font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  }
+
+  .xsm\:font-body {
+    font-family: roboto-condensed;
+  }
+
+  .xsm\:font-hairline {
+    font-weight: 100;
+  }
+
+  .xsm\:font-thin {
+    font-weight: 200;
+  }
+
+  .xsm\:font-light {
+    font-weight: 300;
+  }
+
+  .xsm\:font-normal {
+    font-weight: 400;
+  }
+
+  .xsm\:font-medium {
+    font-weight: 500;
+  }
+
+  .xsm\:font-semibold {
+    font-weight: 600;
+  }
+
+  .xsm\:font-bold {
+    font-weight: 700;
+  }
+
+  .xsm\:font-extrabold {
+    font-weight: 800;
+  }
+
+  .xsm\:font-black {
+    font-weight: 900;
+  }
+
+  .xsm\:hover\:font-hairline:hover {
+    font-weight: 100;
+  }
+
+  .xsm\:hover\:font-thin:hover {
+    font-weight: 200;
+  }
+
+  .xsm\:hover\:font-light:hover {
+    font-weight: 300;
+  }
+
+  .xsm\:hover\:font-normal:hover {
+    font-weight: 400;
+  }
+
+  .xsm\:hover\:font-medium:hover {
+    font-weight: 500;
+  }
+
+  .xsm\:hover\:font-semibold:hover {
+    font-weight: 600;
+  }
+
+  .xsm\:hover\:font-bold:hover {
+    font-weight: 700;
+  }
+
+  .xsm\:hover\:font-extrabold:hover {
+    font-weight: 800;
+  }
+
+  .xsm\:hover\:font-black:hover {
+    font-weight: 900;
+  }
+
+  .xsm\:h-1 {
+    height: .25rem;
+  }
+
+  .xsm\:h-2 {
+    height: .5rem;
+  }
+
+  .xsm\:h-3 {
+    height: .75rem;
+  }
+
+  .xsm\:h-4 {
+    height: 1rem;
+  }
+
+  .xsm\:h-6 {
+    height: 1.5rem;
+  }
+
+  .xsm\:h-8 {
+    height: 2rem;
+  }
+
+  .xsm\:h-10 {
+    height: 2.5rem;
+  }
+
+  .xsm\:h-12 {
+    height: 3rem;
+  }
+
+  .xsm\:h-16 {
+    height: 4rem;
+  }
+
+  .xsm\:h-24 {
+    height: 6rem;
+  }
+
+  .xsm\:h-32 {
+    height: 8rem;
+  }
+
+  .xsm\:h-48 {
+    height: 12rem;
+  }
+
+  .xsm\:h-64 {
+    height: 16rem;
+  }
+
+  .xsm\:h-auto {
+    height: auto;
+  }
+
+  .xsm\:h-px {
+    height: 1px;
+  }
+
+  .xsm\:h-full {
+    height: 100%;
+  }
+
+  .xsm\:h-screen {
+    height: 100vh;
+  }
+
+  .xsm\:leading-none {
+    line-height: 1;
+  }
+
+  .xsm\:leading-tight {
+    line-height: 1.25;
+  }
+
+  .xsm\:leading-smaller {
+    line-height: 1.5;
+  }
+
+  .xsm\:leading-mid {
+    line-height: 1.6;
+  }
+
+  .xsm\:leading-normal {
+    line-height: 1.77;
+  }
+
+  .xsm\:leading-loose {
+    line-height: 1.84;
+  }
+
+  .xsm\:leading-looser {
+    line-height: 1.9;
+  }
+
+  .xsm\:leading-loosest {
+    line-height: 2;
+  }
+
+  .xsm\:m-0 {
+    margin: 0;
+  }
+
+  .xsm\:m-1 {
+    margin: .25rem;
+  }
+
+  .xsm\:m-2 {
+    margin: .5rem;
+  }
+
+  .xsm\:m-3 {
+    margin: .75rem;
+  }
+
+  .xsm\:m-4 {
+    margin: 1rem;
+  }
+
+  .xsm\:m-6 {
+    margin: 1.5rem;
+  }
+
+  .xsm\:m-8 {
+    margin: 2rem;
+  }
+
+  .xsm\:m-10 {
+    margin: 2.5rem;
+  }
+
+  .xsm\:m-12 {
+    margin: 3rem;
+  }
+
+  .xsm\:m-16 {
+    margin: 4rem;
+  }
+
+  .xsm\:m-20 {
+    margin: 5rem;
+  }
+
+  .xsm\:m-24 {
+    margin: 6rem;
+  }
+
+  .xsm\:m-32 {
+    margin: 8rem;
+  }
+
+  .xsm\:m-auto {
+    margin: auto;
+  }
+
+  .xsm\:m-px {
+    margin: 1px;
+  }
+
+  .xsm\:my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .xsm\:mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .xsm\:my-1 {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+
+  .xsm\:mx-1 {
+    margin-left: .25rem;
+    margin-right: .25rem;
+  }
+
+  .xsm\:my-2 {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
+
+  .xsm\:mx-2 {
+    margin-left: .5rem;
+    margin-right: .5rem;
+  }
+
+  .xsm\:my-3 {
+    margin-top: .75rem;
+    margin-bottom: .75rem;
+  }
+
+  .xsm\:mx-3 {
+    margin-left: .75rem;
+    margin-right: .75rem;
+  }
+
+  .xsm\:my-4 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .xsm\:mx-4 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .xsm\:my-6 {
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .xsm\:mx-6 {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+
+  .xsm\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .xsm\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
+  }
+
+  .xsm\:my-10 {
+    margin-top: 2.5rem;
+    margin-bottom: 2.5rem;
+  }
+
+  .xsm\:mx-10 {
+    margin-left: 2.5rem;
+    margin-right: 2.5rem;
+  }
+
+  .xsm\:my-12 {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+  }
+
+  .xsm\:mx-12 {
+    margin-left: 3rem;
+    margin-right: 3rem;
+  }
+
+  .xsm\:my-16 {
+    margin-top: 4rem;
+    margin-bottom: 4rem;
+  }
+
+  .xsm\:mx-16 {
+    margin-left: 4rem;
+    margin-right: 4rem;
+  }
+
+  .xsm\:my-20 {
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+  }
+
+  .xsm\:mx-20 {
+    margin-left: 5rem;
+    margin-right: 5rem;
+  }
+
+  .xsm\:my-24 {
+    margin-top: 6rem;
+    margin-bottom: 6rem;
+  }
+
+  .xsm\:mx-24 {
+    margin-left: 6rem;
+    margin-right: 6rem;
+  }
+
+  .xsm\:my-32 {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+  }
+
+  .xsm\:mx-32 {
+    margin-left: 8rem;
+    margin-right: 8rem;
+  }
+
+  .xsm\:my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  .xsm\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .xsm\:my-px {
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  .xsm\:mx-px {
+    margin-left: 1px;
+    margin-right: 1px;
+  }
+
+  .xsm\:mt-0 {
+    margin-top: 0;
+  }
+
+  .xsm\:mr-0 {
+    margin-right: 0;
+  }
+
+  .xsm\:mb-0 {
+    margin-bottom: 0;
+  }
+
+  .xsm\:ml-0 {
+    margin-left: 0;
+  }
+
+  .xsm\:mt-1 {
+    margin-top: .25rem;
+  }
+
+  .xsm\:mr-1 {
+    margin-right: .25rem;
+  }
+
+  .xsm\:mb-1 {
+    margin-bottom: .25rem;
+  }
+
+  .xsm\:ml-1 {
+    margin-left: .25rem;
+  }
+
+  .xsm\:mt-2 {
+    margin-top: .5rem;
+  }
+
+  .xsm\:mr-2 {
+    margin-right: .5rem;
+  }
+
+  .xsm\:mb-2 {
+    margin-bottom: .5rem;
+  }
+
+  .xsm\:ml-2 {
+    margin-left: .5rem;
+  }
+
+  .xsm\:mt-3 {
+    margin-top: .75rem;
+  }
+
+  .xsm\:mr-3 {
+    margin-right: .75rem;
+  }
+
+  .xsm\:mb-3 {
+    margin-bottom: .75rem;
+  }
+
+  .xsm\:ml-3 {
+    margin-left: .75rem;
+  }
+
+  .xsm\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .xsm\:mr-4 {
+    margin-right: 1rem;
+  }
+
+  .xsm\:mb-4 {
+    margin-bottom: 1rem;
+  }
+
+  .xsm\:ml-4 {
+    margin-left: 1rem;
+  }
+
+  .xsm\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
+  .xsm\:mr-6 {
+    margin-right: 1.5rem;
+  }
+
+  .xsm\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .xsm\:ml-6 {
+    margin-left: 1.5rem;
+  }
+
+  .xsm\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .xsm\:mr-8 {
+    margin-right: 2rem;
+  }
+
+  .xsm\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
+  .xsm\:ml-8 {
+    margin-left: 2rem;
+  }
+
+  .xsm\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .xsm\:mr-10 {
+    margin-right: 2.5rem;
+  }
+
+  .xsm\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
+  .xsm\:ml-10 {
+    margin-left: 2.5rem;
+  }
+
+  .xsm\:mt-12 {
+    margin-top: 3rem;
+  }
+
+  .xsm\:mr-12 {
+    margin-right: 3rem;
+  }
+
+  .xsm\:mb-12 {
+    margin-bottom: 3rem;
+  }
+
+  .xsm\:ml-12 {
+    margin-left: 3rem;
+  }
+
+  .xsm\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .xsm\:mr-16 {
+    margin-right: 4rem;
+  }
+
+  .xsm\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
+  .xsm\:ml-16 {
+    margin-left: 4rem;
+  }
+
+  .xsm\:mt-20 {
+    margin-top: 5rem;
+  }
+
+  .xsm\:mr-20 {
+    margin-right: 5rem;
+  }
+
+  .xsm\:mb-20 {
+    margin-bottom: 5rem;
+  }
+
+  .xsm\:ml-20 {
+    margin-left: 5rem;
+  }
+
+  .xsm\:mt-24 {
+    margin-top: 6rem;
+  }
+
+  .xsm\:mr-24 {
+    margin-right: 6rem;
+  }
+
+  .xsm\:mb-24 {
+    margin-bottom: 6rem;
+  }
+
+  .xsm\:ml-24 {
+    margin-left: 6rem;
+  }
+
+  .xsm\:mt-32 {
+    margin-top: 8rem;
+  }
+
+  .xsm\:mr-32 {
+    margin-right: 8rem;
+  }
+
+  .xsm\:mb-32 {
+    margin-bottom: 8rem;
+  }
+
+  .xsm\:ml-32 {
+    margin-left: 8rem;
+  }
+
+  .xsm\:mt-auto {
+    margin-top: auto;
+  }
+
+  .xsm\:mr-auto {
+    margin-right: auto;
+  }
+
+  .xsm\:mb-auto {
+    margin-bottom: auto;
+  }
+
+  .xsm\:ml-auto {
+    margin-left: auto;
+  }
+
+  .xsm\:mt-px {
+    margin-top: 1px;
+  }
+
+  .xsm\:mr-px {
+    margin-right: 1px;
+  }
+
+  .xsm\:mb-px {
+    margin-bottom: 1px;
+  }
+
+  .xsm\:ml-px {
+    margin-left: 1px;
+  }
+
+  .xsm\:max-h-35 {
+    max-height: 35rem;
+  }
+
+  .xsm\:max-h-xs {
+    max-height: 20rem;
+  }
+
+  .xsm\:max-h-sm {
+    max-height: 30rem;
+  }
+
+  .xsm\:max-h-md {
+    max-height: 40rem;
+  }
+
+  .xsm\:max-h-lg {
+    max-height: 50rem;
+  }
+
+  .xsm\:max-h-xl {
+    max-height: 60rem;
+  }
+
+  .xsm\:max-h-2xl {
+    max-height: 70rem;
+  }
+
+  .xsm\:max-h-3xl {
+    max-height: 80rem;
+  }
+
+  .xsm\:max-h-4xl {
+    max-height: 90rem;
+  }
+
+  .xsm\:max-h-5xl {
+    max-height: 100rem;
+  }
+
+  .xsm\:max-h-full {
+    max-height: 100%;
+  }
+
+  .xsm\:max-h-screen {
+    max-height: 100vh;
+  }
+
+  .xsm\:max-w-1 {
+    max-width: 1rem;
+  }
+
+  .xsm\:max-w-2 {
+    max-width: 2rem;
+  }
+
+  .xsm\:max-w-3 {
+    max-width: 3rem;
+  }
+
+  .xsm\:max-w-4 {
+    max-width: 4rem;
+  }
+
+  .xsm\:max-w-5 {
+    max-width: 5rem;
+  }
+
+  .xsm\:max-w-10 {
+    max-width: 10rem;
+  }
+
+  .xsm\:max-w-35 {
+    max-width: 35rem;
+  }
+
+  .max-w-2\.xsm\:5 {
+    max-width: 2.5rem;
+  }
+
+  .xsm\:max-w-xs {
+    max-width: 20rem;
+  }
+
+  .xsm\:max-w-sm {
+    max-width: 30rem;
+  }
+
+  .xsm\:max-w-md {
+    max-width: 40rem;
+  }
+
+  .xsm\:max-w-lg {
+    max-width: 50rem;
+  }
+
+  .xsm\:max-w-xl {
+    max-width: 60rem;
+  }
+
+  .xsm\:max-w-2xl {
+    max-width: 70rem;
+  }
+
+  .xsm\:max-w-3xl {
+    max-width: 80rem;
+  }
+
+  .xsm\:max-w-4xl {
+    max-width: 90rem;
+  }
+
+  .xsm\:max-w-5xl {
+    max-width: 100rem;
+  }
+
+  .xsm\:max-w-full {
+    max-width: 100%;
+  }
+
+  .xsm\:min-h-0 {
+    min-height: 0;
+  }
+
+  .xsm\:min-h-full {
+    min-height: 100%;
+  }
+
+  .xsm\:min-h-screen {
+    min-height: 100vh;
+  }
+
+  .xsm\:min-w-0 {
+    min-width: 0;
+  }
+
+  .xsm\:min-w-full {
+    min-width: 100%;
+  }
+
+  .xsm\:-m-0 {
+    margin: 0;
+  }
+
+  .xsm\:-m-1 {
+    margin: -0.25rem;
+  }
+
+  .xsm\:-m-2 {
+    margin: -0.5rem;
+  }
+
+  .xsm\:-m-3 {
+    margin: -0.75rem;
+  }
+
+  .xsm\:-m-4 {
+    margin: -1rem;
+  }
+
+  .xsm\:-m-6 {
+    margin: -1.5rem;
+  }
+
+  .xsm\:-m-8 {
+    margin: -2rem;
+  }
+
+  .xsm\:-m-10 {
+    margin: -2.5rem;
+  }
+
+  .xsm\:-m-12 {
+    margin: -3rem;
+  }
+
+  .xsm\:-m-16 {
+    margin: -4rem;
+  }
+
+  .xsm\:-m-20 {
+    margin: -5rem;
+  }
+
+  .xsm\:-m-24 {
+    margin: -6rem;
+  }
+
+  .xsm\:-m-28 {
+    margin: -7rem;
+  }
+
+  .xsm\:-m-32 {
+    margin: -8rem;
+  }
+
+  .xsm\:-m-px {
+    margin: -1px;
+  }
+
+  .xsm\:-my-0 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .xsm\:-mx-0 {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .xsm\:-my-1 {
+    margin-top: -0.25rem;
+    margin-bottom: -0.25rem;
+  }
+
+  .xsm\:-mx-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+  }
+
+  .xsm\:-my-2 {
+    margin-top: -0.5rem;
+    margin-bottom: -0.5rem;
+  }
+
+  .xsm\:-mx-2 {
+    margin-left: -0.5rem;
+    margin-right: -0.5rem;
+  }
+
+  .xsm\:-my-3 {
+    margin-top: -0.75rem;
+    margin-bottom: -0.75rem;
+  }
+
+  .xsm\:-mx-3 {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+  }
+
+  .xsm\:-my-4 {
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+  }
+
+  .xsm\:-mx-4 {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+
+  .xsm\:-my-6 {
+    margin-top: -1.5rem;
+    margin-bottom: -1.5rem;
+  }
+
+  .xsm\:-mx-6 {
+    margin-left: -1.5rem;
+    margin-right: -1.5rem;
+  }
+
+  .xsm\:-my-8 {
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+  }
+
+  .xsm\:-mx-8 {
+    margin-left: -2rem;
+    margin-right: -2rem;
+  }
+
+  .xsm\:-my-10 {
+    margin-top: -2.5rem;
+    margin-bottom: -2.5rem;
+  }
+
+  .xsm\:-mx-10 {
+    margin-left: -2.5rem;
+    margin-right: -2.5rem;
+  }
+
+  .xsm\:-my-12 {
+    margin-top: -3rem;
+    margin-bottom: -3rem;
+  }
+
+  .xsm\:-mx-12 {
+    margin-left: -3rem;
+    margin-right: -3rem;
+  }
+
+  .xsm\:-my-16 {
+    margin-top: -4rem;
+    margin-bottom: -4rem;
+  }
+
+  .xsm\:-mx-16 {
+    margin-left: -4rem;
+    margin-right: -4rem;
+  }
+
+  .xsm\:-my-20 {
+    margin-top: -5rem;
+    margin-bottom: -5rem;
+  }
+
+  .xsm\:-mx-20 {
+    margin-left: -5rem;
+    margin-right: -5rem;
+  }
+
+  .xsm\:-my-24 {
+    margin-top: -6rem;
+    margin-bottom: -6rem;
+  }
+
+  .xsm\:-mx-24 {
+    margin-left: -6rem;
+    margin-right: -6rem;
+  }
+
+  .xsm\:-my-28 {
+    margin-top: -7rem;
+    margin-bottom: -7rem;
+  }
+
+  .xsm\:-mx-28 {
+    margin-left: -7rem;
+    margin-right: -7rem;
+  }
+
+  .xsm\:-my-32 {
+    margin-top: -8rem;
+    margin-bottom: -8rem;
+  }
+
+  .xsm\:-mx-32 {
+    margin-left: -8rem;
+    margin-right: -8rem;
+  }
+
+  .xsm\:-my-px {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
+
+  .xsm\:-mx-px {
+    margin-left: -1px;
+    margin-right: -1px;
+  }
+
+  .xsm\:-mt-0 {
+    margin-top: 0;
+  }
+
+  .xsm\:-mr-0 {
+    margin-right: 0;
+  }
+
+  .xsm\:-mb-0 {
+    margin-bottom: 0;
+  }
+
+  .xsm\:-ml-0 {
+    margin-left: 0;
+  }
+
+  .xsm\:-mt-1 {
+    margin-top: -0.25rem;
+  }
+
+  .xsm\:-mr-1 {
+    margin-right: -0.25rem;
+  }
+
+  .xsm\:-mb-1 {
+    margin-bottom: -0.25rem;
+  }
+
+  .xsm\:-ml-1 {
+    margin-left: -0.25rem;
+  }
+
+  .xsm\:-mt-2 {
+    margin-top: -0.5rem;
+  }
+
+  .xsm\:-mr-2 {
+    margin-right: -0.5rem;
+  }
+
+  .xsm\:-mb-2 {
+    margin-bottom: -0.5rem;
+  }
+
+  .xsm\:-ml-2 {
+    margin-left: -0.5rem;
+  }
+
+  .xsm\:-mt-3 {
+    margin-top: -0.75rem;
+  }
+
+  .xsm\:-mr-3 {
+    margin-right: -0.75rem;
+  }
+
+  .xsm\:-mb-3 {
+    margin-bottom: -0.75rem;
+  }
+
+  .xsm\:-ml-3 {
+    margin-left: -0.75rem;
+  }
+
+  .xsm\:-mt-4 {
+    margin-top: -1rem;
+  }
+
+  .xsm\:-mr-4 {
+    margin-right: -1rem;
+  }
+
+  .xsm\:-mb-4 {
+    margin-bottom: -1rem;
+  }
+
+  .xsm\:-ml-4 {
+    margin-left: -1rem;
+  }
+
+  .xsm\:-mt-6 {
+    margin-top: -1.5rem;
+  }
+
+  .xsm\:-mr-6 {
+    margin-right: -1.5rem;
+  }
+
+  .xsm\:-mb-6 {
+    margin-bottom: -1.5rem;
+  }
+
+  .xsm\:-ml-6 {
+    margin-left: -1.5rem;
+  }
+
+  .xsm\:-mt-8 {
+    margin-top: -2rem;
+  }
+
+  .xsm\:-mr-8 {
+    margin-right: -2rem;
+  }
+
+  .xsm\:-mb-8 {
+    margin-bottom: -2rem;
+  }
+
+  .xsm\:-ml-8 {
+    margin-left: -2rem;
+  }
+
+  .xsm\:-mt-10 {
+    margin-top: -2.5rem;
+  }
+
+  .xsm\:-mr-10 {
+    margin-right: -2.5rem;
+  }
+
+  .xsm\:-mb-10 {
+    margin-bottom: -2.5rem;
+  }
+
+  .xsm\:-ml-10 {
+    margin-left: -2.5rem;
+  }
+
+  .xsm\:-mt-12 {
+    margin-top: -3rem;
+  }
+
+  .xsm\:-mr-12 {
+    margin-right: -3rem;
+  }
+
+  .xsm\:-mb-12 {
+    margin-bottom: -3rem;
+  }
+
+  .xsm\:-ml-12 {
+    margin-left: -3rem;
+  }
+
+  .xsm\:-mt-16 {
+    margin-top: -4rem;
+  }
+
+  .xsm\:-mr-16 {
+    margin-right: -4rem;
+  }
+
+  .xsm\:-mb-16 {
+    margin-bottom: -4rem;
+  }
+
+  .xsm\:-ml-16 {
+    margin-left: -4rem;
+  }
+
+  .xsm\:-mt-20 {
+    margin-top: -5rem;
+  }
+
+  .xsm\:-mr-20 {
+    margin-right: -5rem;
+  }
+
+  .xsm\:-mb-20 {
+    margin-bottom: -5rem;
+  }
+
+  .xsm\:-ml-20 {
+    margin-left: -5rem;
+  }
+
+  .xsm\:-mt-24 {
+    margin-top: -6rem;
+  }
+
+  .xsm\:-mr-24 {
+    margin-right: -6rem;
+  }
+
+  .xsm\:-mb-24 {
+    margin-bottom: -6rem;
+  }
+
+  .xsm\:-ml-24 {
+    margin-left: -6rem;
+  }
+
+  .xsm\:-mt-28 {
+    margin-top: -7rem;
+  }
+
+  .xsm\:-mr-28 {
+    margin-right: -7rem;
+  }
+
+  .xsm\:-mb-28 {
+    margin-bottom: -7rem;
+  }
+
+  .xsm\:-ml-28 {
+    margin-left: -7rem;
+  }
+
+  .xsm\:-mt-32 {
+    margin-top: -8rem;
+  }
+
+  .xsm\:-mr-32 {
+    margin-right: -8rem;
+  }
+
+  .xsm\:-mb-32 {
+    margin-bottom: -8rem;
+  }
+
+  .xsm\:-ml-32 {
+    margin-left: -8rem;
+  }
+
+  .xsm\:-mt-px {
+    margin-top: -1px;
+  }
+
+  .xsm\:-mr-px {
+    margin-right: -1px;
+  }
+
+  .xsm\:-mb-px {
+    margin-bottom: -1px;
+  }
+
+  .xsm\:-ml-px {
+    margin-left: -1px;
+  }
+
+  .xsm\:opacity-0 {
+    opacity: 0;
+  }
+
+  .xsm\:opacity-25 {
+    opacity: .25;
+  }
+
+  .xsm\:opacity-30 {
+    opacity: .3;
+  }
+
+  .xsm\:opacity-50 {
+    opacity: .5;
+  }
+
+  .xsm\:opacity-60 {
+    opacity: .6;
+  }
+
+  .xsm\:opacity-70 {
+    opacity: .7;
+  }
+
+  .xsm\:opacity-80 {
+    opacity: .8;
+  }
+
+  .xsm\:opacity-90 {
+    opacity: .9;
+  }
+
+  .xsm\:opacity-100 {
+    opacity: 1;
+  }
+
+  .xsm\:hover\:opacity-0:hover {
+    opacity: 0;
+  }
+
+  .xsm\:hover\:opacity-25:hover {
+    opacity: .25;
+  }
+
+  .xsm\:hover\:opacity-30:hover {
+    opacity: .3;
+  }
+
+  .xsm\:hover\:opacity-50:hover {
+    opacity: .5;
+  }
+
+  .xsm\:hover\:opacity-60:hover {
+    opacity: .6;
+  }
+
+  .xsm\:hover\:opacity-70:hover {
+    opacity: .7;
+  }
+
+  .xsm\:hover\:opacity-80:hover {
+    opacity: .8;
+  }
+
+  .xsm\:hover\:opacity-90:hover {
+    opacity: .9;
+  }
+
+  .xsm\:hover\:opacity-100:hover {
+    opacity: 1;
+  }
+
+  .xsm\:overflow-auto {
+    overflow: auto;
+  }
+
+  .xsm\:overflow-hidden {
+    overflow: hidden;
+  }
+
+  .xsm\:overflow-visible {
+    overflow: visible;
+  }
+
+  .xsm\:overflow-scroll {
+    overflow: scroll;
+  }
+
+  .xsm\:overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .xsm\:overflow-y-auto {
+    overflow-y: auto;
+  }
+
+  .xsm\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+
+  .xsm\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
+  .xsm\:overflow-x-visible {
+    overflow-x: visible;
+  }
+
+  .xsm\:overflow-y-visible {
+    overflow-y: visible;
+  }
+
+  .xsm\:overflow-x-scroll {
+    overflow-x: scroll;
+  }
+
+  .xsm\:overflow-y-scroll {
+    overflow-y: scroll;
+  }
+
+  .xsm\:scrolling-touch {
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .xsm\:scrolling-auto {
+    -webkit-overflow-scrolling: auto;
+  }
+
+  .xsm\:p-0 {
+    padding: 0;
+  }
+
+  .xsm\:p-1 {
+    padding: .25rem;
+  }
+
+  .xsm\:p-2 {
+    padding: .5rem;
+  }
+
+  .xsm\:p-3 {
+    padding: .75rem;
+  }
+
+  .xsm\:p-4 {
+    padding: 1rem;
+  }
+
+  .xsm\:p-6 {
+    padding: 1.5rem;
+  }
+
+  .xsm\:p-8 {
+    padding: 2rem;
+  }
+
+  .xsm\:p-10 {
+    padding: 3rem;
+  }
+
+  .xsm\:p-16 {
+    padding: 4rem;
+  }
+
+  .xsm\:p-px {
+    padding: 1px;
+  }
+
+  .xsm\:py-0 {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .xsm\:px-0 {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .xsm\:py-1 {
+    padding-top: .25rem;
+    padding-bottom: .25rem;
+  }
+
+  .xsm\:px-1 {
+    padding-left: .25rem;
+    padding-right: .25rem;
+  }
+
+  .xsm\:py-2 {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+  }
+
+  .xsm\:px-2 {
+    padding-left: .5rem;
+    padding-right: .5rem;
+  }
+
+  .xsm\:py-3 {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+  }
+
+  .xsm\:px-3 {
+    padding-left: .75rem;
+    padding-right: .75rem;
+  }
+
+  .xsm\:py-4 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+
+  .xsm\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .xsm\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .xsm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .xsm\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  .xsm\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .xsm\:py-10 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .xsm\:px-10 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .xsm\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .xsm\:px-16 {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
+
+  .xsm\:py-px {
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  .xsm\:px-px {
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  .xsm\:pt-0 {
+    padding-top: 0;
+  }
+
+  .xsm\:pr-0 {
+    padding-right: 0;
+  }
+
+  .xsm\:pb-0 {
+    padding-bottom: 0;
+  }
+
+  .xsm\:pl-0 {
+    padding-left: 0;
+  }
+
+  .xsm\:pt-1 {
+    padding-top: .25rem;
+  }
+
+  .xsm\:pr-1 {
+    padding-right: .25rem;
+  }
+
+  .xsm\:pb-1 {
+    padding-bottom: .25rem;
+  }
+
+  .xsm\:pl-1 {
+    padding-left: .25rem;
+  }
+
+  .xsm\:pt-2 {
+    padding-top: .5rem;
+  }
+
+  .xsm\:pr-2 {
+    padding-right: .5rem;
+  }
+
+  .xsm\:pb-2 {
+    padding-bottom: .5rem;
+  }
+
+  .xsm\:pl-2 {
+    padding-left: .5rem;
+  }
+
+  .xsm\:pt-3 {
+    padding-top: .75rem;
+  }
+
+  .xsm\:pr-3 {
+    padding-right: .75rem;
+  }
+
+  .xsm\:pb-3 {
+    padding-bottom: .75rem;
+  }
+
+  .xsm\:pl-3 {
+    padding-left: .75rem;
+  }
+
+  .xsm\:pt-4 {
+    padding-top: 1rem;
+  }
+
+  .xsm\:pr-4 {
+    padding-right: 1rem;
+  }
+
+  .xsm\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .xsm\:pl-4 {
+    padding-left: 1rem;
+  }
+
+  .xsm\:pt-6 {
+    padding-top: 1.5rem;
+  }
+
+  .xsm\:pr-6 {
+    padding-right: 1.5rem;
+  }
+
+  .xsm\:pb-6 {
+    padding-bottom: 1.5rem;
+  }
+
+  .xsm\:pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .xsm\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .xsm\:pr-8 {
+    padding-right: 2rem;
+  }
+
+  .xsm\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .xsm\:pl-8 {
+    padding-left: 2rem;
+  }
+
+  .xsm\:pt-10 {
+    padding-top: 3rem;
+  }
+
+  .xsm\:pr-10 {
+    padding-right: 3rem;
+  }
+
+  .xsm\:pb-10 {
+    padding-bottom: 3rem;
+  }
+
+  .xsm\:pl-10 {
+    padding-left: 3rem;
+  }
+
+  .xsm\:pt-16 {
+    padding-top: 4rem;
+  }
+
+  .xsm\:pr-16 {
+    padding-right: 4rem;
+  }
+
+  .xsm\:pb-16 {
+    padding-bottom: 4rem;
+  }
+
+  .xsm\:pl-16 {
+    padding-left: 4rem;
+  }
+
+  .xsm\:pt-px {
+    padding-top: 1px;
+  }
+
+  .xsm\:pr-px {
+    padding-right: 1px;
+  }
+
+  .xsm\:pb-px {
+    padding-bottom: 1px;
+  }
+
+  .xsm\:pl-px {
+    padding-left: 1px;
+  }
+
+  .xsm\:pointer-events-none {
+    pointer-events: none;
+  }
+
+  .xsm\:pointer-events-auto {
+    pointer-events: auto;
+  }
+
+  .xsm\:static {
+    position: static;
+  }
+
+  .xsm\:fixed {
+    position: fixed;
+  }
+
+  .xsm\:absolute {
+    position: absolute;
+  }
+
+  .xsm\:relative {
+    position: relative;
+  }
+
+  .xsm\:sticky {
+    position: sticky;
+  }
+
+  .xsm\:pin-none {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
+
+  .xsm\:pin {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  .xsm\:pin-y {
+    top: 0;
+    bottom: 0;
+  }
+
+  .xsm\:pin-x {
+    right: 0;
+    left: 0;
+  }
+
+  .xsm\:pin-t {
+    top: 0;
+  }
+
+  .xsm\:pin-r {
+    right: 0;
+  }
+
+  .xsm\:pin-b {
+    bottom: 0;
+  }
+
+  .xsm\:pin-l {
+    left: 0;
+  }
+
+  .xsm\:resize-none {
+    resize: none;
+  }
+
+  .xsm\:resize-y {
+    resize: vertical;
+  }
+
+  .xsm\:resize-x {
+    resize: horizontal;
+  }
+
+  .xsm\:resize {
+    resize: both;
+  }
+
+  .xsm\:shadow {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .xsm\:shadow-md {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xsm\:shadow-lg {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xsm\:shadow-inner {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .xsm\:shadow-none {
+    box-shadow: none;
+  }
+
+  .xsm\:hover\:shadow:hover {
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
+  }
+
+  .xsm\:hover\:shadow-md:hover {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xsm\:hover\:shadow-lg:hover {
+    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+  }
+
+  .xsm\:hover\:shadow-inner:hover {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, .06);
+  }
+
+  .xsm\:hover\:shadow-none:hover {
+    box-shadow: none;
+  }
+
+  .xsm\:text-left {
+    text-align: left;
+  }
+
+  .xsm\:text-center {
+    text-align: center;
+  }
+
+  .xsm\:text-right {
+    text-align: right;
+  }
+
+  .xsm\:text-justify {
+    text-align: justify;
+  }
+
+  .xsm\:text-transparent {
+    color: transparent;
+  }
+
+  .xsm\:text-black {
+    color: #2d2d2d;
+  }
+
+  .xsm\:text-black-light {
+    color: #333;
+  }
+
+  .xsm\:text-grey-darkest {
+    color: #3d4852;
+  }
+
+  .xsm\:text-grey-darker {
+    color: #606f7b;
+  }
+
+  .xsm\:text-grey-dark {
+    color: #8795a1;
+  }
+
+  .xsm\:text-grey {
+    color: #b8c2cc;
+  }
+
+  .xsm\:text-grey-light {
+    color: #dae1e7;
+  }
+
+  .xsm\:text-grey-lighter {
+    color: #f1f5f8;
+  }
+
+  .xsm\:text-grey-lightest {
+    color: #f8fafc;
+  }
+
+  .xsm\:text-white {
+    color: #fff;
+  }
+
+  .xsm\:text-red-darkest {
+    color: #3b0d0c;
+  }
+
+  .xsm\:text-red-darker {
+    color: #621b18;
+  }
+
+  .xsm\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .xsm\:text-red {
+    color: #e3342f;
+  }
+
+  .xsm\:text-red-light {
+    color: #ef5753;
+  }
+
+  .xsm\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .xsm\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .xsm\:text-orange-darkest {
+    color: #462a16;
+  }
+
+  .xsm\:text-orange-darker {
+    color: #613b1f;
+  }
+
+  .xsm\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .xsm\:text-orange {
+    color: #f6993f;
+  }
+
+  .xsm\:text-orange-light {
+    color: #faad63;
+  }
+
+  .xsm\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .xsm\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .xsm\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .xsm\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .xsm\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .xsm\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .xsm\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .xsm\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .xsm\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .xsm\:text-green-darkest {
+    color: #0f2f21;
+  }
+
+  .xsm\:text-green-darker {
+    color: #1a4731;
+  }
+
+  .xsm\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .xsm\:text-green {
+    color: #38c172;
+  }
+
+  .xsm\:text-green-light {
+    color: #51d88a;
+  }
+
+  .xsm\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .xsm\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .xsm\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .xsm\:text-teal-darker {
+    color: #20504f;
+  }
+
+  .xsm\:text-teal-dark {
+    color: #51b5bb;
+  }
+
+  .xsm\:text-teal {
+    color: #5dcdd4;
+  }
+
+  .xsm\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .xsm\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .xsm\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .xsm\:text-blue-darkest {
+    color: #12283a;
+  }
+
+  .xsm\:text-blue-darker {
+    color: #1c3d5a;
+  }
+
+  .xsm\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .xsm\:text-blue {
+    color: #3490dc;
+  }
+
+  .xsm\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .xsm\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .xsm\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .xsm\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .xsm\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .xsm\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .xsm\:text-indigo {
+    color: #636ef2;
+  }
+
+  .xsm\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .xsm\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .xsm\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .xsm\:text-purple-darkest {
+    color: #21183c;
+  }
+
+  .xsm\:text-purple-darker {
+    color: #382b5f;
+  }
+
+  .xsm\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .xsm\:text-purple {
+    color: #9561e2;
+  }
+
+  .xsm\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .xsm\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .xsm\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .xsm\:text-pink-darkest {
+    color: #451225;
+  }
+
+  .xsm\:text-pink-darker {
+    color: #6f213f;
+  }
+
+  .xsm\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .xsm\:text-pink {
+    color: #f66d9b;
+  }
+
+  .xsm\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .xsm\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .xsm\:text-pink-lightest {
+    color: #ffebef;
+  }
+
+  .group:hover .xsm\:group-hover\:text-transparent {
+    color: transparent;
+  }
+
+  .group:hover .xsm\:group-hover\:text-black {
+    color: #2d2d2d;
+  }
+
+  .group:hover .xsm\:group-hover\:text-black-light {
+    color: #333;
+  }
+
+  .group:hover .xsm\:group-hover\:text-grey-darkest {
+    color: #3d4852;
+  }
+
+  .group:hover .xsm\:group-hover\:text-grey-darker {
+    color: #606f7b;
+  }
+
+  .group:hover .xsm\:group-hover\:text-grey-dark {
+    color: #8795a1;
+  }
+
+  .group:hover .xsm\:group-hover\:text-grey {
+    color: #b8c2cc;
+  }
+
+  .group:hover .xsm\:group-hover\:text-grey-light {
+    color: #dae1e7;
+  }
+
+  .group:hover .xsm\:group-hover\:text-grey-lighter {
+    color: #f1f5f8;
+  }
+
+  .group:hover .xsm\:group-hover\:text-grey-lightest {
+    color: #f8fafc;
+  }
+
+  .group:hover .xsm\:group-hover\:text-white {
+    color: #fff;
+  }
+
+  .group:hover .xsm\:group-hover\:text-red-darkest {
+    color: #3b0d0c;
+  }
+
+  .group:hover .xsm\:group-hover\:text-red-darker {
+    color: #621b18;
+  }
+
+  .group:hover .xsm\:group-hover\:text-red-dark {
+    color: #cc1f1a;
+  }
+
+  .group:hover .xsm\:group-hover\:text-red {
+    color: #e3342f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-red-light {
+    color: #ef5753;
+  }
+
+  .group:hover .xsm\:group-hover\:text-red-lighter {
+    color: #f9acaa;
+  }
+
+  .group:hover .xsm\:group-hover\:text-red-lightest {
+    color: #fcebea;
+  }
+
+  .group:hover .xsm\:group-hover\:text-orange-darkest {
+    color: #462a16;
+  }
+
+  .group:hover .xsm\:group-hover\:text-orange-darker {
+    color: #613b1f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-orange-dark {
+    color: #de751f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-orange {
+    color: #f6993f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-orange-light {
+    color: #faad63;
+  }
+
+  .group:hover .xsm\:group-hover\:text-orange-lighter {
+    color: #fcd9b6;
+  }
+
+  .group:hover .xsm\:group-hover\:text-orange-lightest {
+    color: #fff5eb;
+  }
+
+  .group:hover .xsm\:group-hover\:text-yellow-darkest {
+    color: #453411;
+  }
+
+  .group:hover .xsm\:group-hover\:text-yellow-darker {
+    color: #684f1d;
+  }
+
+  .group:hover .xsm\:group-hover\:text-yellow-dark {
+    color: #f2d024;
+  }
+
+  .group:hover .xsm\:group-hover\:text-yellow {
+    color: #ffed4a;
+  }
+
+  .group:hover .xsm\:group-hover\:text-yellow-light {
+    color: #fff382;
+  }
+
+  .group:hover .xsm\:group-hover\:text-yellow-lighter {
+    color: #fff9c2;
+  }
+
+  .group:hover .xsm\:group-hover\:text-yellow-lightest {
+    color: #fcfbeb;
+  }
+
+  .group:hover .xsm\:group-hover\:text-green-darkest {
+    color: #0f2f21;
+  }
+
+  .group:hover .xsm\:group-hover\:text-green-darker {
+    color: #1a4731;
+  }
+
+  .group:hover .xsm\:group-hover\:text-green-dark {
+    color: #1f9d55;
+  }
+
+  .group:hover .xsm\:group-hover\:text-green {
+    color: #38c172;
+  }
+
+  .group:hover .xsm\:group-hover\:text-green-light {
+    color: #51d88a;
+  }
+
+  .group:hover .xsm\:group-hover\:text-green-lighter {
+    color: #a2f5bf;
+  }
+
+  .group:hover .xsm\:group-hover\:text-green-lightest {
+    color: #e3fcec;
+  }
+
+  .group:hover .xsm\:group-hover\:text-teal-darkest {
+    color: #0d3331;
+  }
+
+  .group:hover .xsm\:group-hover\:text-teal-darker {
+    color: #20504f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-teal-dark {
+    color: #51b5bb;
+  }
+
+  .group:hover .xsm\:group-hover\:text-teal {
+    color: #5dcdd4;
+  }
+
+  .group:hover .xsm\:group-hover\:text-teal-light {
+    color: #64d5ca;
+  }
+
+  .group:hover .xsm\:group-hover\:text-teal-lighter {
+    color: #a0f0ed;
+  }
+
+  .group:hover .xsm\:group-hover\:text-teal-lightest {
+    color: #e8fffe;
+  }
+
+  .group:hover .xsm\:group-hover\:text-blue-darkest {
+    color: #12283a;
+  }
+
+  .group:hover .xsm\:group-hover\:text-blue-darker {
+    color: #1c3d5a;
+  }
+
+  .group:hover .xsm\:group-hover\:text-blue-dark {
+    color: #2779bd;
+  }
+
+  .group:hover .xsm\:group-hover\:text-blue {
+    color: #3490dc;
+  }
+
+  .group:hover .xsm\:group-hover\:text-blue-light {
+    color: #6cb2eb;
+  }
+
+  .group:hover .xsm\:group-hover\:text-blue-lighter {
+    color: #bcdefa;
+  }
+
+  .group:hover .xsm\:group-hover\:text-blue-lightest {
+    color: #eff8ff;
+  }
+
+  .group:hover .xsm\:group-hover\:text-indigo-darkest {
+    color: #191e38;
+  }
+
+  .group:hover .xsm\:group-hover\:text-indigo-darker {
+    color: #2f365f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-indigo-dark {
+    color: #5661b3;
+  }
+
+  .group:hover .xsm\:group-hover\:text-indigo {
+    color: #636ef2;
+  }
+
+  .group:hover .xsm\:group-hover\:text-indigo-light {
+    color: #7886d7;
+  }
+
+  .group:hover .xsm\:group-hover\:text-indigo-lighter {
+    color: #b2b7ff;
+  }
+
+  .group:hover .xsm\:group-hover\:text-indigo-lightest {
+    color: #e6e8ff;
+  }
+
+  .group:hover .xsm\:group-hover\:text-purple-darkest {
+    color: #21183c;
+  }
+
+  .group:hover .xsm\:group-hover\:text-purple-darker {
+    color: #382b5f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-purple-dark {
+    color: #794acf;
+  }
+
+  .group:hover .xsm\:group-hover\:text-purple {
+    color: #9561e2;
+  }
+
+  .group:hover .xsm\:group-hover\:text-purple-light {
+    color: #a779e9;
+  }
+
+  .group:hover .xsm\:group-hover\:text-purple-lighter {
+    color: #d6bbfc;
+  }
+
+  .group:hover .xsm\:group-hover\:text-purple-lightest {
+    color: #f3ebff;
+  }
+
+  .group:hover .xsm\:group-hover\:text-pink-darkest {
+    color: #451225;
+  }
+
+  .group:hover .xsm\:group-hover\:text-pink-darker {
+    color: #6f213f;
+  }
+
+  .group:hover .xsm\:group-hover\:text-pink-dark {
+    color: #eb5286;
+  }
+
+  .group:hover .xsm\:group-hover\:text-pink {
+    color: #f66d9b;
+  }
+
+  .group:hover .xsm\:group-hover\:text-pink-light {
+    color: #fa7ea8;
+  }
+
+  .group:hover .xsm\:group-hover\:text-pink-lighter {
+    color: #ffbbca;
+  }
+
+  .group:hover .xsm\:group-hover\:text-pink-lightest {
+    color: #ffebef;
+  }
+
+  .xsm\:hover\:text-transparent:hover {
+    color: transparent;
+  }
+
+  .xsm\:hover\:text-black:hover {
+    color: #2d2d2d;
+  }
+
+  .xsm\:hover\:text-black-light:hover {
+    color: #333;
+  }
+
+  .xsm\:hover\:text-grey-darkest:hover {
+    color: #3d4852;
+  }
+
+  .xsm\:hover\:text-grey-darker:hover {
+    color: #606f7b;
+  }
+
+  .xsm\:hover\:text-grey-dark:hover {
+    color: #8795a1;
+  }
+
+  .xsm\:hover\:text-grey:hover {
+    color: #b8c2cc;
+  }
+
+  .xsm\:hover\:text-grey-light:hover {
+    color: #dae1e7;
+  }
+
+  .xsm\:hover\:text-grey-lighter:hover {
+    color: #f1f5f8;
+  }
+
+  .xsm\:hover\:text-grey-lightest:hover {
+    color: #f8fafc;
+  }
+
+  .xsm\:hover\:text-white:hover {
+    color: #fff;
+  }
+
+  .xsm\:hover\:text-red-darkest:hover {
+    color: #3b0d0c;
+  }
+
+  .xsm\:hover\:text-red-darker:hover {
+    color: #621b18;
+  }
+
+  .xsm\:hover\:text-red-dark:hover {
+    color: #cc1f1a;
+  }
+
+  .xsm\:hover\:text-red:hover {
+    color: #e3342f;
+  }
+
+  .xsm\:hover\:text-red-light:hover {
+    color: #ef5753;
+  }
+
+  .xsm\:hover\:text-red-lighter:hover {
+    color: #f9acaa;
+  }
+
+  .xsm\:hover\:text-red-lightest:hover {
+    color: #fcebea;
+  }
+
+  .xsm\:hover\:text-orange-darkest:hover {
+    color: #462a16;
+  }
+
+  .xsm\:hover\:text-orange-darker:hover {
+    color: #613b1f;
+  }
+
+  .xsm\:hover\:text-orange-dark:hover {
+    color: #de751f;
+  }
+
+  .xsm\:hover\:text-orange:hover {
+    color: #f6993f;
+  }
+
+  .xsm\:hover\:text-orange-light:hover {
+    color: #faad63;
+  }
+
+  .xsm\:hover\:text-orange-lighter:hover {
+    color: #fcd9b6;
+  }
+
+  .xsm\:hover\:text-orange-lightest:hover {
+    color: #fff5eb;
+  }
+
+  .xsm\:hover\:text-yellow-darkest:hover {
+    color: #453411;
+  }
+
+  .xsm\:hover\:text-yellow-darker:hover {
+    color: #684f1d;
+  }
+
+  .xsm\:hover\:text-yellow-dark:hover {
+    color: #f2d024;
+  }
+
+  .xsm\:hover\:text-yellow:hover {
+    color: #ffed4a;
+  }
+
+  .xsm\:hover\:text-yellow-light:hover {
+    color: #fff382;
+  }
+
+  .xsm\:hover\:text-yellow-lighter:hover {
+    color: #fff9c2;
+  }
+
+  .xsm\:hover\:text-yellow-lightest:hover {
+    color: #fcfbeb;
+  }
+
+  .xsm\:hover\:text-green-darkest:hover {
+    color: #0f2f21;
+  }
+
+  .xsm\:hover\:text-green-darker:hover {
+    color: #1a4731;
+  }
+
+  .xsm\:hover\:text-green-dark:hover {
+    color: #1f9d55;
+  }
+
+  .xsm\:hover\:text-green:hover {
+    color: #38c172;
+  }
+
+  .xsm\:hover\:text-green-light:hover {
+    color: #51d88a;
+  }
+
+  .xsm\:hover\:text-green-lighter:hover {
+    color: #a2f5bf;
+  }
+
+  .xsm\:hover\:text-green-lightest:hover {
+    color: #e3fcec;
+  }
+
+  .xsm\:hover\:text-teal-darkest:hover {
+    color: #0d3331;
+  }
+
+  .xsm\:hover\:text-teal-darker:hover {
+    color: #20504f;
+  }
+
+  .xsm\:hover\:text-teal-dark:hover {
+    color: #51b5bb;
+  }
+
+  .xsm\:hover\:text-teal:hover {
+    color: #5dcdd4;
+  }
+
+  .xsm\:hover\:text-teal-light:hover {
+    color: #64d5ca;
+  }
+
+  .xsm\:hover\:text-teal-lighter:hover {
+    color: #a0f0ed;
+  }
+
+  .xsm\:hover\:text-teal-lightest:hover {
+    color: #e8fffe;
+  }
+
+  .xsm\:hover\:text-blue-darkest:hover {
+    color: #12283a;
+  }
+
+  .xsm\:hover\:text-blue-darker:hover {
+    color: #1c3d5a;
+  }
+
+  .xsm\:hover\:text-blue-dark:hover {
+    color: #2779bd;
+  }
+
+  .xsm\:hover\:text-blue:hover {
+    color: #3490dc;
+  }
+
+  .xsm\:hover\:text-blue-light:hover {
+    color: #6cb2eb;
+  }
+
+  .xsm\:hover\:text-blue-lighter:hover {
+    color: #bcdefa;
+  }
+
+  .xsm\:hover\:text-blue-lightest:hover {
+    color: #eff8ff;
+  }
+
+  .xsm\:hover\:text-indigo-darkest:hover {
+    color: #191e38;
+  }
+
+  .xsm\:hover\:text-indigo-darker:hover {
+    color: #2f365f;
+  }
+
+  .xsm\:hover\:text-indigo-dark:hover {
+    color: #5661b3;
+  }
+
+  .xsm\:hover\:text-indigo:hover {
+    color: #636ef2;
+  }
+
+  .xsm\:hover\:text-indigo-light:hover {
+    color: #7886d7;
+  }
+
+  .xsm\:hover\:text-indigo-lighter:hover {
+    color: #b2b7ff;
+  }
+
+  .xsm\:hover\:text-indigo-lightest:hover {
+    color: #e6e8ff;
+  }
+
+  .xsm\:hover\:text-purple-darkest:hover {
+    color: #21183c;
+  }
+
+  .xsm\:hover\:text-purple-darker:hover {
+    color: #382b5f;
+  }
+
+  .xsm\:hover\:text-purple-dark:hover {
+    color: #794acf;
+  }
+
+  .xsm\:hover\:text-purple:hover {
+    color: #9561e2;
+  }
+
+  .xsm\:hover\:text-purple-light:hover {
+    color: #a779e9;
+  }
+
+  .xsm\:hover\:text-purple-lighter:hover {
+    color: #d6bbfc;
+  }
+
+  .xsm\:hover\:text-purple-lightest:hover {
+    color: #f3ebff;
+  }
+
+  .xsm\:hover\:text-pink-darkest:hover {
+    color: #451225;
+  }
+
+  .xsm\:hover\:text-pink-darker:hover {
+    color: #6f213f;
+  }
+
+  .xsm\:hover\:text-pink-dark:hover {
+    color: #eb5286;
+  }
+
+  .xsm\:hover\:text-pink:hover {
+    color: #f66d9b;
+  }
+
+  .xsm\:hover\:text-pink-light:hover {
+    color: #fa7ea8;
+  }
+
+  .xsm\:hover\:text-pink-lighter:hover {
+    color: #ffbbca;
+  }
+
+  .xsm\:hover\:text-pink-lightest:hover {
+    color: #ffebef;
+  }
+
+  .xsm\:text-xs {
+    font-size: .75rem;
+  }
+
+  .xsm\:text-sm {
+    font-size: .875rem;
+  }
+
+  .xsm\:text-base {
+    font-size: 1rem;
+  }
+
+  .xsm\:text-lg {
+    font-size: 1.125rem;
+  }
+
+  .xsm\:text-xl {
+    font-size: 1.25rem;
+  }
+
+  .xsm\:text-2xl {
+    font-size: 1.5rem;
+  }
+
+  .xsm\:text-3xl {
+    font-size: 1.875rem;
+  }
+
+  .xsm\:text-4xl {
+    font-size: 2.25rem;
+  }
+
+  .xsm\:text-5xl {
+    font-size: 3rem;
+  }
+
+  .xsm\:italic {
+    font-style: italic;
+  }
+
+  .xsm\:roman {
+    font-style: normal;
+  }
+
+  .xsm\:uppercase {
+    text-transform: uppercase;
+  }
+
+  .xsm\:lowercase {
+    text-transform: lowercase;
+  }
+
+  .xsm\:capitalize {
+    text-transform: capitalize;
+  }
+
+  .xsm\:normal-case {
+    text-transform: none;
+  }
+
+  .xsm\:underline {
+    text-decoration: underline;
+  }
+
+  .xsm\:line-through {
+    text-decoration: line-through;
+  }
+
+  .xsm\:no-underline {
+    text-decoration: none;
+  }
+
+  .xsm\:antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .xsm\:subpixel-antialiased {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  .xsm\:hover\:italic:hover {
+    font-style: italic;
+  }
+
+  .xsm\:hover\:roman:hover {
+    font-style: normal;
+  }
+
+  .xsm\:hover\:uppercase:hover {
+    text-transform: uppercase;
+  }
+
+  .xsm\:hover\:lowercase:hover {
+    text-transform: lowercase;
+  }
+
+  .xsm\:hover\:capitalize:hover {
+    text-transform: capitalize;
+  }
+
+  .xsm\:hover\:normal-case:hover {
+    text-transform: none;
+  }
+
+  .xsm\:hover\:underline:hover {
+    text-decoration: underline;
+  }
+
+  .xsm\:hover\:line-through:hover {
+    text-decoration: line-through;
+  }
+
+  .xsm\:hover\:no-underline:hover {
+    text-decoration: none;
+  }
+
+  .xsm\:hover\:antialiased:hover {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .xsm\:hover\:subpixel-antialiased:hover {
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  .xsm\:tracking-tight {
+    letter-spacing: -0.05em;
+  }
+
+  .xsm\:tracking-normal {
+    letter-spacing: 0;
+  }
+
+  .xsm\:tracking-wide {
+    letter-spacing: .05em;
+  }
+
+  .xsm\:select-none {
+    user-select: none;
+  }
+
+  .xsm\:select-text {
+    user-select: text;
+  }
+
+  .xsm\:align-baseline {
+    vertical-align: baseline;
+  }
+
+  .xsm\:align-top {
+    vertical-align: top;
+  }
+
+  .xsm\:align-middle {
+    vertical-align: middle;
+  }
+
+  .xsm\:align-bottom {
+    vertical-align: bottom;
+  }
+
+  .xsm\:align-text-top {
+    vertical-align: text-top;
+  }
+
+  .xsm\:align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
+  .xsm\:visible {
+    visibility: visible;
+  }
+
+  .xsm\:invisible {
+    visibility: hidden;
+  }
+
+  .xsm\:whitespace-normal {
+    white-space: normal;
+  }
+
+  .xsm\:whitespace-no-wrap {
+    white-space: nowrap;
+  }
+
+  .xsm\:whitespace-pre {
+    white-space: pre;
+  }
+
+  .xsm\:whitespace-pre-line {
+    white-space: pre-line;
+  }
+
+  .xsm\:whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
+  .xsm\:break-words {
+    word-wrap: break-word;
+  }
+
+  .xsm\:break-normal {
+    word-wrap: normal;
+  }
+
+  .xsm\:truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .xsm\:w-1 {
+    width: .25rem;
+  }
+
+  .xsm\:w-2 {
+    width: .5rem;
+  }
+
+  .xsm\:w-3 {
+    width: .75rem;
+  }
+
+  .xsm\:w-4 {
+    width: 1rem;
+  }
+
+  .xsm\:w-6 {
+    width: 1.5rem;
+  }
+
+  .xsm\:w-8 {
+    width: 2rem;
+  }
+
+  .xsm\:w-10 {
+    width: 2.5rem;
+  }
+
+  .xsm\:w-12 {
+    width: 3rem;
+  }
+
+  .xsm\:w-16 {
+    width: 4rem;
+  }
+
+  .xsm\:w-24 {
+    width: 6rem;
+  }
+
+  .xsm\:w-32 {
+    width: 8rem;
+  }
+
+  .xsm\:w-48 {
+    width: 12rem;
+  }
+
+  .xsm\:w-64 {
+    width: 16rem;
+  }
+
+  .xsm\:w-auto {
+    width: auto;
+  }
+
+  .xsm\:w-px {
+    width: 1px;
+  }
+
+  .xsm\:w-1\/2 {
+    width: 50%;
+  }
+
+  .xsm\:w-1\/3 {
+    width: 33.33333%;
+  }
+
+  .xsm\:w-2\/3 {
+    width: 66.66667%;
+  }
+
+  .xsm\:w-1\/4 {
+    width: 25%;
+  }
+
+  .xsm\:w-3\/4 {
+    width: 75%;
+  }
+
+  .xsm\:w-1\/5 {
+    width: 20%;
+  }
+
+  .xsm\:w-2\/5 {
+    width: 40%;
+  }
+
+  .xsm\:w-3\/5 {
+    width: 60%;
+  }
+
+  .xsm\:w-4\/5 {
+    width: 80%;
+  }
+
+  .xsm\:w-1\/6 {
+    width: 16.66667%;
+  }
+
+  .xsm\:w-5\/6 {
+    width: 83.33333%;
+  }
+
+  .xsm\:w-full {
+    width: 100%;
+  }
+
+  .xsm\:w-screen {
+    width: 100vw;
+  }
+
+  .xsm\:z-0 {
+    z-index: 0;
+  }
+
+  .xsm\:z-10 {
+    z-index: 10;
+  }
+
+  .xsm\:z-20 {
+    z-index: 20;
+  }
+
+  .xsm\:z-30 {
+    z-index: 30;
+  }
+
+  .xsm\:z-40 {
+    z-index: 40;
+  }
+
+  .xsm\:z-50 {
+    z-index: 50;
+  }
+
+  .xsm\:z--3 {
+    z-index: -3;
+  }
+
+  .xsm\:z--2 {
+    z-index: -2;
+  }
+
+  .xsm\:z--1 {
+    z-index: -1;
+  }
+
+  .xsm\:z-auto {
+    z-index: auto;
+  }
+}
+
 @media (min-width: 576px) {
   .sm\:list-reset {
     list-style: none;
@@ -8070,6 +13239,14 @@ table {
     line-height: 1.25;
   }
 
+  .sm\:leading-smaller {
+    line-height: 1.5;
+  }
+
+  .sm\:leading-mid {
+    line-height: 1.6;
+  }
+
   .sm\:leading-normal {
     line-height: 1.77;
   }
@@ -13217,6 +18394,14 @@ table {
     line-height: 1.25;
   }
 
+  .md\:leading-smaller {
+    line-height: 1.5;
+  }
+
+  .md\:leading-mid {
+    line-height: 1.6;
+  }
+
   .md\:leading-normal {
     line-height: 1.77;
   }
@@ -18364,6 +23549,14 @@ table {
     line-height: 1.25;
   }
 
+  .lg\:leading-smaller {
+    line-height: 1.5;
+  }
+
+  .lg\:leading-mid {
+    line-height: 1.6;
+  }
+
   .lg\:leading-normal {
     line-height: 1.77;
   }
@@ -23511,6 +28704,14 @@ table {
     line-height: 1.25;
   }
 
+  .xl\:leading-smaller {
+    line-height: 1.5;
+  }
+
+  .xl\:leading-mid {
+    line-height: 1.6;
+  }
+
   .xl\:leading-normal {
     line-height: 1.77;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9d2390b..057443d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -165,6 +165,7 @@ module.exports = {
   */
 
   screens: {
+    xsm: '370px',
     sm: '576px',
     md: '768px',
     lg: '992px',
@@ -314,6 +315,8 @@ module.exports = {
   leading: {
     none: 1,
     tight: 1.25,
+    smaller: 1.5,
+    mid: 1.6,
     normal: 1.77,
     loose: 1.84,
     looser: 1.9,