Padding for CLI page on mobile

src/layouts/page/tea-cli.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 
 <section class="tea-cli">
-  <div class="container">
+  <div class="container tea-cli-container">
     <div class="row">
       <div class="col my-auto">
         <h1>TEA CLI</h1>
@@ -14,7 +14,7 @@
 {{- partial "full-width-cta-split.html" . -}}
 
 <section class="teal-bg">
-  <div class="container">
+  <div class="container tea-cli-container">
     <div class="row">
       <div class="col">
         <p class="black text-center">TOTAL DOWNLOADS</p>

src/static/css/products.css

@@ -1,3 +1,7 @@
+/*This page includes CSS for products page + all products ancillary pages*/
+
+/* Products - Main */
+
 @media only screen and (min-width: 1200px) {
 
   .products-hero{
@@ -39,6 +43,59 @@
     padding: 7vw !important;
   }
 
+  .gen-art{
+    display:none;
+  }
+
+}
+
+/* Products - TEA.CLI */
+
+@media only screen and (min-width: 1200px) {
+
+  .products-hero{
+    background-image: url("/Images/x-large-grid-hero.svg");
+    background-attachment: fixed;
+    background-position: top;
+    background-repeat: repeat;
+    background-size: contain;
+  }
+
+  .products-hero h1{
+    position: relative;
+    z-index: 2;
+  }
+
+  .lead-container{
+    padding-left: 25vw;
+    padding-right: 25vw;
+    margin-bottom: -2.7vw;
+  }
+
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+
+}
+
+@media only screen and (max-width: 576px) {
+
+  .tea-cli-container{
+    padding: 7vw !important;
+  }
+
+  .gen-art{
+    display:none;
+  }
+
 }
 
 /* Generative Art styling */

src/static/css/typography.css

@@ -218,7 +218,7 @@ li{
 @media only screen and (max-width: 576px) {
 
   h1{
-    font-size: 21.5vw !important;
+    font-size: 21.5vw;
     line-height: 20.4vw !important;
   }