Added spacing ultilities page based on grid box height

src/layouts/page/tea-cli.html

@@ -160,7 +160,7 @@
 
 </script>
 
-<section class="teal-bg">
+<section class="teal-bg two-boxes">
   <div class="container tea-cli-container">
     <div class="row">
       <div class="col">
@@ -183,7 +183,7 @@
 </style>
 
 <section>
-  <div class="container">
+  <div class="container two-boxes">
     <div class="row">
       <h3>The new foundation of the internet.</h3>
     </div>

src/layouts/partials/clipboard-modal.html

@@ -25,7 +25,6 @@
 
   .modal-image{
     background-image: url("/Images/gen-art/abstract-pattern.png");
-    background-attachment: fixed;
     background-position: center;
     background-repeat: repeat;
     background-size: cover;

src/layouts/partials/head.html

@@ -63,6 +63,7 @@
     <link rel="stylesheet" href="/css/products.css">
     <link rel="stylesheet" href="/css/accordion.css">
     <link rel="stylesheet" href="/css/nebraska-man.css">
+    <link rel="stylesheet" href="/css/spacing.css">
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"

src/static/css/spacing.css

@@ -0,0 +1,20 @@
+/* This file is entirely for spacing utlilities. Spacing is based of the grid-box height/width and various viewer widths. */
+
+/* Height spacers */
+
+
+
+.three-boxes{
+  padding-top: 12.556vw;
+  padding-bottom: 12.556vw;
+}
+
+.two-boxes{
+  padding-top: 8.371vw;
+  padding-bottom: 8.371vw;
+}
+
+.one-box{
+  padding-top: 4.185vw;
+  padding-bottom: 4.185vw;
+}