diff --git a/content/page/home/cta2/cta2.md b/content/page/home/cta2/cta2.md
index b1ad137cf..e253f66ef 100644
--- a/content/page/home/cta2/cta2.md
+++ b/content/page/home/cta2/cta2.md
@@ -14,4 +14,4 @@ Get to know the ThreeFold vision better.
 <!-- button2: Spread our Message
 link: ''
 button3: Join our Community
-link: '' -->
\ No newline at end of file
+link: '' -->
diff --git a/package.json b/package.json
index 7e4bf527b..8c08b37e3 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,10 @@
     "explore": "gridsome explore"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.30",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
+    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
     "@gridsome/source-filesystem": "^0.6.2",
     "@gridsome/transformer-remark": "^0.6.2",
     "@noxify/gridsome-remark-classes": "^1.0.0",
@@ -21,18 +25,16 @@
     "gridsome-source-graphql": "^1.0.2",
     "gridsome-source-static-meta": "github:noxify/gridsome-source-static-meta#master",
     "lodash": "^4.17.20",
+    "node-sass": "^5.0.0",
     "pluralize": "^8.0.0",
     "sass-loader": "^10.0.2",
     "tailwindcss": "^1.8.4",
     "tailwindcss-gradients": "^3.0.0",
     "tailwindcss-tables": "^0.4.0",
     "v-tooltip": "^2.0.3",
-    "vue-markdown": "^2.2.4",
-    "@fortawesome/fontawesome-svg-core": "^1.2.30",
-    "@fortawesome/free-brands-svg-icons": "^5.14.0",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
-    "@fortawesome/vue-fontawesome": "^2.0.0",
-    "node-sass": "^5.0.0"
+    "vue-markdown": "^2.1.2"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.2.0"
+  }
 }
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index a67f66020..45f814b5b 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -1,314 +1,322 @@
 @tailwind base;
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: url("https://fonts.googleapis.com/css2?family=Roboto");
+  font-display: swap;
+}
+
 blockquote {
-    @apply border-l;
-    @apply border-l-4;
-    @apply border-l-blue-500;
-    @apply pl-4;
-    @apply italic;
-    @apply my-8;
-    p {
-        padding: 0 !important;
-    }
+  @apply border-l;
+  @apply border-l-4;
+  @apply border-l-blue-500;
+  @apply pl-4;
+  @apply italic;
+  @apply my-8;
+  p {
+    padding: 0 !important;
+  }
 }
 
 body {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 body h2 {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 h1 {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 body {
-    padding-top: 60px;
+  padding-top: 60px;
 }
 
 body p {
-    font-family: 'Lato', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 .act-link {
-    @apply bg-gray-300;
+  @apply bg-gray-300;
 }
 
 pre {
-    @apply border-l;
-    @apply border-l-2;
-    @apply border-l-gray-500;
-    @apply pl-4;
-    @apply mt-4;
-    @apply text-base;
-    @apply break-words;
-    @apply overflow-x-auto;
+  @apply border-l;
+  @apply border-l-2;
+  @apply border-l-gray-500;
+  @apply pl-4;
+  @apply mt-4;
+  @apply text-base;
+  @apply break-words;
+  @apply overflow-x-auto;
 }
 
 ol {
-    @apply list-decimal;
-    @apply ml-5;
+  @apply list-decimal;
+  @apply ml-5;
 }
 
 ul {
-    @apply list-disc;
-    @apply ml-5;
+  @apply list-disc;
+  @apply ml-5;
 }
 
-:not(pre)>code {
-    @apply text-red-600;
-    @apply text-base;
+:not(pre) > code {
+  @apply text-red-600;
+  @apply text-base;
 }
 
 @tailwind components;
 @tailwind utilities;
 @responsive {
-    .pxi-0 {
-        @apply px-0 #{!important};
-    }
-    .pyi-0 {
-        @apply py-0 #{!important};
-    }
-    .pi-0 {
-        @apply p-0 #{!important};
-    }
+  .pxi-0 {
+    @apply px-0 #{!important};
+  }
+  .pyi-0 {
+    @apply py-0 #{!important};
+  }
+  .pi-0 {
+    @apply p-0 #{!important};
+  }
 }
 
 .animated-link:after {
-    content: "";
-    width: 0px;
-    height: 1px;
-    display: block;
-    transition: 300ms;
-    @apply bg-gray-500;
+  content: "";
+  width: 0px;
+  height: 1px;
+  display: block;
+  transition: 300ms;
+  @apply bg-gray-500;
 }
 
 .footerlink {
-    margin-left: 0rem !important;
+  margin-left: 0rem !important;
 }
 
 // .animated-link:hover:after {
 //     width: 100%;
 // }
 .height-30px {
-    height: 30px;
+  height: 30px;
 }
 
 .text-3xl {
-    font-size: 2.50rem
+  font-size: 2.5rem;
 }
 
 .no-border {
-    border-width: 0px !important;
+  border-width: 0px !important;
 }
 
 .flex-post {
-    @apply border-b;
-    @apply border-b-gray-300;
-    @apply flex-col;
+  @apply border-b;
+  @apply border-b-gray-300;
+  @apply flex-col;
+  @apply w-full;
+  .post-card-image {
+    // @apply h-56;
+    @apply h-full;
     @apply w-full;
-    .post-card-image {
-        // @apply h-56;
-        @apply h-full;
-        @apply w-full;
-        @apply object-cover;
-        @apply rounded;
-        @apply relative;
-    }
-    .post-card-title {
-        @apply leading-none;
-        @apply text-2xl;
-        @apply font-medium;
-    }
-    .post-card-excerpt {
-        @apply font-serif;
-    }
+    @apply object-cover;
+    @apply rounded;
+    @apply relative;
+  }
+  .post-card-title {
+    @apply leading-none;
+    @apply text-2xl;
+    @apply font-medium;
+  }
+  .post-card-excerpt {
+    @apply font-serif;
+  }
 }
 
 .author-list-item:nth-child(n + 2) {
-    @apply -ml-3;
+  @apply -ml-3;
 }
 
 button:focus {
-    outline: none;
+  outline: none;
 }
 
 .telegram_icon {
-    font-size: 1.2rem;
+  font-size: 1.2rem;
 }
 
 .post-content a {
-    color: #4ec48f;
+  color: #4ec48f;
 }
 
 .text-8xl {
-    font-size: 5rem;
-    line-height: 1;
-    font-family: 'Lato', sans-serif !important;
+  font-size: 5rem;
+  line-height: 1;
+  font-family: "Roboto", sans-serif !important;
 }
 
 text-6xl {
-    font-family: 'Lato', sans-serif !important;
+  font-family: "Roboto", sans-serif !important;
 }
 
 text-5xl {
-    font-family: 'Lato', sans-serif !important;
+  font-family: "Roboto", sans-serif !important;
 }
 
 @media (min-width: 375px) {
-    .text-3xl {
-        font-size: 2.25rem
-    }
+  .text-3xl {
+    font-size: 2.25rem;
+  }
 }
 
 @media (min-width: 768px) {
-    .with-large>.flex-post:nth-child(5n),
-    .with-large>.flex-post:nth-child(5n-1) {
-        // @apply flex-100;
-        flex: 1 1 50%;
-        @apply flex-col;
-        .post-card-image-link {
-            @apply relative;
-            min-height: 400px;
-        }
-        .post-card-image {
-            @apply absolute;
-            @apply h-full;
-            @apply w-full;
-            @apply object-cover;
-            @apply rounded-lg;
-        }
-        .post-card-content {
-            // @apply flex-post-large-content;
-            flex: 0 1 auto;
-            @apply self-center;
-        }
-        .post-card-title {
-            @apply text-4xl;
-        }
-        .post-card-excerpt {
-            @apply text-xl;
-        }
+  .with-large > .flex-post:nth-child(5n),
+  .with-large > .flex-post:nth-child(5n-1) {
+    // @apply flex-100;
+    flex: 1 1 50%;
+    @apply flex-col;
+    .post-card-image-link {
+      @apply relative;
+      min-height: 400px;
     }
-    .news>.flex-post:nth-child(5n),
-    .news>.flex-post:nth-child(5n-1) {
-        // @apply flex-100;
-        flex: 1 1 50%;
-        @apply flex-col;
-        .post-card-image-link {
-            @apply relative;
-            min-height: 300px;
-        }
-        .post-card-image {
-            @apply absolute;
-            @apply h-full;
-            @apply w-full;
-            @apply object-cover;
-            @apply rounded-lg;
-        }
-        .post-card-content {
-            // @apply flex-post-large-content;
-            flex: 0 1 auto;
-            @apply self-center;
-        }
-        .post-card-title {
-            @apply text-4xl;
-        }
-        .post-card-excerpt {
-            @apply text-xl;
-        }
+    .post-card-image {
+      @apply absolute;
+      @apply h-full;
+      @apply w-full;
+      @apply object-cover;
+      @apply rounded-lg;
     }
-    .text-3xl {
-        font-size: 2.50rem
+    .post-card-content {
+      // @apply flex-post-large-content;
+      flex: 0 1 auto;
+      @apply self-center;
     }
-    // .news>.flex-post:nth-child(9n+1),
-    // .news>.flex-post:nth-child(9n+2) {
-    //     // @apply flex-100;
-    //     flex: 1 1 50%;
-    //     @apply flex-col;
-    //     .post-card-image-link {
-    //         @apply relative;
-    //         min-height: 300px;
-    //     }
-    //     .post-card-image {
-    //         @apply absolute;
-    //         @apply h-full;
-    //         @apply w-full;
-    //         @apply object-cover;
-    //         @apply rounded-lg;
-    //     }
-    //     .post-card-content {
-    //         // @apply flex-post-large-content;
-    //         flex: 0 1 auto;
-    //         @apply self-center;
-    //     }
-    //     .post-card-title {
-    //         @apply text-4xl;
-    //     }
-    //     .post-card-excerpt {
-    //         @apply text-xl;
-    //     }
-    // }
-    // .news>.flex-post:nth-child(9n+3),
-    // .news>.flex-post:nth-child(9n+4),
-    // .news>.flex-post:nth-child(9n+5) {
-    //     // @apply flex-100;
-    //     flex: 1 1 300px;
-    //     @apply flex-col;
-    //     .post-card-image-link {
-    //         @apply relative;
-    //         min-height: 180px;
-    //     }
-    //     .post-card-image {
-    //         @apply absolute;
-    //         @apply h-full;
-    //         @apply w-full;
-    //         @apply object-cover;
-    //         @apply rounded-lg;
-    //     }
-    //     .post-card-content {
-    //         // @apply flex-post-large-content;
-    //         flex: 0 1 auto;
-    //         @apply self-center;
-    //     }
-    //     .post-card-title {
-    //         @apply text-4xl;
-    //     }
-    //     .post-card-excerpt {
-    //         @apply text-xl;
-    //     }
-    // }
-    // .news>.flex-post:nth-child(9n+6),
-    // .news>.flex-post:nth-child(9n+7),
-    // .news>.flex-post:nth-child(9n+8),
-    // .news>.flex-post:nth-child(9n+9) {
-    //     // @apply flex-100;
-    //     flex: 1 1 250px;
-    //     @apply flex-col;
-    //     .post-card-image-link {
-    //         @apply relative;
-    //         min-height: 300px;
-    //     }
-    //     .post-card-image {
-    //         @apply absolute;
-    //         @apply h-full;
-    //         @apply w-full;
-    //         @apply object-cover;
-    //         @apply rounded-lg;
-    //     }
-    //     .post-card-content {
-    //         // @apply flex-post-large-content;
-    //         flex: 0 1 auto;
-    //         @apply self-center;
-    //     }
-    //     .post-card-title {
-    //         @apply text-4xl;
-    //     }
-    //     .post-card-excerpt {
-    //         @apply text-xl;
-    //     }
-    // }
+    .post-card-title {
+      @apply text-4xl;
+    }
+    .post-card-excerpt {
+      @apply text-xl;
+    }
+  }
+  .news > .flex-post:nth-child(5n),
+  .news > .flex-post:nth-child(5n-1) {
+    // @apply flex-100;
+    flex: 1 1 50%;
+    @apply flex-col;
+    .post-card-image-link {
+      @apply relative;
+      min-height: 300px;
+    }
+    .post-card-image {
+      @apply absolute;
+      @apply h-full;
+      @apply w-full;
+      @apply object-cover;
+      @apply rounded-lg;
+    }
+    .post-card-content {
+      // @apply flex-post-large-content;
+      flex: 0 1 auto;
+      @apply self-center;
+    }
+    .post-card-title {
+      @apply text-4xl;
+    }
+    .post-card-excerpt {
+      @apply text-xl;
+    }
+  }
+  .text-3xl {
+    font-size: 2.5rem;
+  }
+  // .news>.flex-post:nth-child(9n+1),
+  // .news>.flex-post:nth-child(9n+2) {
+  //     // @apply flex-100;
+  //     flex: 1 1 50%;
+  //     @apply flex-col;
+  //     .post-card-image-link {
+  //         @apply relative;
+  //         min-height: 300px;
+  //     }
+  //     .post-card-image {
+  //         @apply absolute;
+  //         @apply h-full;
+  //         @apply w-full;
+  //         @apply object-cover;
+  //         @apply rounded-lg;
+  //     }
+  //     .post-card-content {
+  //         // @apply flex-post-large-content;
+  //         flex: 0 1 auto;
+  //         @apply self-center;
+  //     }
+  //     .post-card-title {
+  //         @apply text-4xl;
+  //     }
+  //     .post-card-excerpt {
+  //         @apply text-xl;
+  //     }
+  // }
+  // .news>.flex-post:nth-child(9n+3),
+  // .news>.flex-post:nth-child(9n+4),
+  // .news>.flex-post:nth-child(9n+5) {
+  //     // @apply flex-100;
+  //     flex: 1 1 300px;
+  //     @apply flex-col;
+  //     .post-card-image-link {
+  //         @apply relative;
+  //         min-height: 180px;
+  //     }
+  //     .post-card-image {
+  //         @apply absolute;
+  //         @apply h-full;
+  //         @apply w-full;
+  //         @apply object-cover;
+  //         @apply rounded-lg;
+  //     }
+  //     .post-card-content {
+  //         // @apply flex-post-large-content;
+  //         flex: 0 1 auto;
+  //         @apply self-center;
+  //     }
+  //     .post-card-title {
+  //         @apply text-4xl;
+  //     }
+  //     .post-card-excerpt {
+  //         @apply text-xl;
+  //     }
+  // }
+  // .news>.flex-post:nth-child(9n+6),
+  // .news>.flex-post:nth-child(9n+7),
+  // .news>.flex-post:nth-child(9n+8),
+  // .news>.flex-post:nth-child(9n+9) {
+  //     // @apply flex-100;
+  //     flex: 1 1 250px;
+  //     @apply flex-col;
+  //     .post-card-image-link {
+  //         @apply relative;
+  //         min-height: 300px;
+  //     }
+  //     .post-card-image {
+  //         @apply absolute;
+  //         @apply h-full;
+  //         @apply w-full;
+  //         @apply object-cover;
+  //         @apply rounded-lg;
+  //     }
+  //     .post-card-content {
+  //         // @apply flex-post-large-content;
+  //         flex: 0 1 auto;
+  //         @apply self-center;
+  //     }
+  //     .post-card-title {
+  //         @apply text-4xl;
+  //     }
+  //     .post-card-excerpt {
+  //         @apply text-xl;
+  //     }
+  // }
 }
 
 // body[data-theme="dark"] {
@@ -378,4 +386,4 @@ text-5xl {
 //       }
 //     }
 //   }
-// }
\ No newline at end of file
+// }
diff --git a/src/components/custom/Modal.vue b/src/components/custom/Modal.vue
index 562da14e6..852f3324d 100644
--- a/src/components/custom/Modal.vue
+++ b/src/components/custom/Modal.vue
@@ -1,35 +1,21 @@
 <template>
-  <div>
+  <div @click="handleClose">
     <div
       v-if="showModal"
-      class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
+      class="fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex"
     >
-      <div class="relative w-auto my-6 mx-auto max-w-6xl">
-        <button
-          class="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
-          @click="handleClose"
-        >
-          <span
-            class="bg-transparent text-white opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none"
-          >
-            ×
-          </span>
-        </button>
-        <div
-          class="border-0 rounded-lg relative flex flex-col w-full outline-none focus:outline-none"
-        >
-          <div class="relative flex-auto">
-            <iframe
-              width="800"
-              height="450"
-              :src="link"
-              frameborder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope;
-            picture-in-picture"
-              allowfullscreen
-            />
-          </div>
-        </div>
+      <div
+        class="iframe-container relative h-0 w-1/2"
+        style="padding-bottom: 56.25%"
+      >
+        <iframe
+          :src="link"
+          frameborder="0"
+          width="640"
+          height="360"
+          allowfullscreen
+          class="absolute top-0 left-0 w-full h-full"
+        ></iframe>
       </div>
     </div>
     <div v-if="showModal" class="opacity-75 fixed inset-0 z-40 bg-black"></div>
@@ -46,4 +32,11 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+<style scoped>
+@media (max-width: 768px) {
+  .iframe-container {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/custom/sections/CallToAction.vue b/src/components/custom/sections/CallToAction.vue
index ab014e8e0..16cfc33a1 100644
--- a/src/components/custom/sections/CallToAction.vue
+++ b/src/components/custom/sections/CallToAction.vue
@@ -12,10 +12,7 @@
       >
         {{ cta.slogan }}
       </span>
-      <div
-        v-html="cta.content"
-        class="mt-6 mb-8 text-gray-600"
-      ></div>
+      <div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
@@ -37,7 +34,8 @@
         >{{ cta.button2 }}</g-link
       >
       <g-link
-        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"       v-if="cta.button3"
+        class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+        v-if="cta.button3"
         :to="cta.link3"
         >{{ cta.button3 }}</g-link
       >
@@ -50,14 +48,11 @@
       >
         {{ cta.title }}
       </h2>
-      <div
-        v-html="cta.content"
-        class="mt-6 mb-8 text-gray-600"
-      ></div>
+      <div v-html="cta.content" class="mt-6 mb-8 text-gray-600"></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
-          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          class="inline-block cursor-pointer bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
           >{{ cta.video_button }}</a
         >
       </div>
diff --git a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
index 61392195f..8dace5b5c 100644
--- a/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
+++ b/src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue
@@ -38,7 +38,7 @@
               :href="product.url"
               class="bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 shadow rounded-full"
               >{{ product.button }}</a
-            > 
+            >
           </div>
         </div>
       </a>
@@ -66,5 +66,6 @@ export default {
 
 .take_apart {
   background-color: #f5f5f5;
+  max-height: 570px;
 }
 </style>
diff --git a/tailwind.config.js b/tailwind.config.js
index 3508c152e..7018a7c6d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,95 +5,97 @@ var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').de
 
 
 module.exports = {
-        purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
-        theme: {
-            borderWidth: {
-                default: '1px',
-                '0': '0',
-                '2': '2px',
-                '3': '3px',
-                '4': '4px',
-                '6': '6px',
-                '8': '8px'
-            },
-            flex: {
-                '1': '1 1 0%',
-                auto: '1 1 auto',
-                initial: '0 1 auto',
-                none: 'none',
-                'post': '1 1 300px',
-                '100': '1 1 100%',
-                'post-large-content': '0 1 361px',
-            },
-            zIndex: {
-                '-10': '-10',
-                '0': 0,
-                '10': 10,
-                '20': 20,
-                '30': 30,
-                '40': 40,
-                '50': 50,
-                '25': 25,
-                '50': 50,
-                '75': 75,
-                '100': 100,
-                '1000': 1000,
-                'auto': 'auto',
-            },
-            corePlugins: {
-                container: false
-            },
-            extend: {},
-            radialGradients: {
-                shapes: { // defaults to this value
-                    'default': 'ellipse',
-                },
-                sizes: { // defaults to this value
-                    'default': '',
-                },
-                positions: { // defaults to these values
-                    'default': 'center',
-                    't': 'top'
-                },
-                colors: { // defaults to {}
-                    'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
-                },
-            },
-        },
-        variants: {},
-        plugins: [
-                function({
-                    addComponents
-                }) {
-                    addComponents({
-                        '.container': {
-                            maxWidth: '100%',
-                            '@screen sm': {
-                                maxWidth: '640px',
-                            },
-                            '@screen md': {
-                                maxWidth: '768px',
-                            },
-                            '@screen lg': {
-                                maxWidth: '1024px',
-                            },
-                            '@screen xl': {
-                                maxWidth: '1040px',
-                            },
-                        }
-                    })
-                },
-                function({
-                    addUtilities,
-                    e,
-                    theme,
-                    variants
-                }) {
-                    const colors = flattenColorPalette(theme('borderColor'))
+  purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
+  theme: {
+    borderWidth: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '3': '3px',
+      '4': '4px',
+      '6': '6px',
+      '8': '8px'
+    },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+      'post': '1 1 300px',
+      '100': '1 1 100%',
+      'post-large-content': '0 1 361px',
+    },
+    zIndex: {
+      '-10': '-10',
+      '0': 0,
+      '10': 10,
+      '20': 20,
+      '30': 30,
+      '40': 40,
+      '50': 50,
+      '25': 25,
+      '50': 50,
+      '75': 75,
+      '100': 100,
+      '1000': 1000,
+      'auto': 'auto',
+    },
+    corePlugins: {
+      container: false
+    },
+    extend: {},
+    radialGradients: {
+      shapes: { // defaults to this value
+        'default': 'ellipse',
+      },
+      sizes: { // defaults to this value
+        'default': '',
+      },
+      positions: { // defaults to these values
+        'default': 'center',
+        't': 'top'
+      },
+      colors: { // defaults to {}
+        'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
+      },
+    },
+  },
+  variants: {},
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
 
-                    const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
+    function ({
+      addComponents
+    }) {
+      addComponents({
+        '.container': {
+          maxWidth: '100%',
+          '@screen sm': {
+            maxWidth: '640px',
+          },
+          '@screen md': {
+            maxWidth: '768px',
+          },
+          '@screen lg': {
+            maxWidth: '1024px',
+          },
+          '@screen xl': {
+            maxWidth: '1040px',
+          },
+        }
+      })
+    },
+    function ({
+      addUtilities,
+      e,
+      theme,
+      variants
+    }) {
+      const colors = flattenColorPalette(theme('borderColor'))
 
-                                    [`.${e(`border-t-${modifier}`)}`]: {
+      const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
+
+        [`.${e(`border-t-${modifier}`)}`]: {
           borderTopColor: `${value}`
         },
         [`.${e(`border-r-${modifier}`)}`]: {